背景色和边框CSS代码

示例代码：

<p style="background: #ffff80;border-color:#FF8000;border-style: solid;border-width: 1px">
	实线边框
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: dotted;border-width: 1px">
	点状线边框
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: dashed;border-width: 1px">
	虚线边框
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: double;border-width: 3px">
	双实线边框
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: groove;border-width: 5px">
	深浅色相间，上深下浅
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: ridge;border-width: 5px">
	深浅色相间，上浅下深
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: inset;border-width: 5px">
	单色边框，上深下浅
</p>

<p style="background: #ffff80;border-color:#FF8000;border-style: outset;border-width: 5px">
	单色边框，上浅下深
</p>

 

border-style 边框样式，可能的值：

值 描述

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

 

【css3的两个新特性】

• border-radius 属性用于创建圆角边框，例如border-radius:5px，5px是圆角的半径。
• box-shadow 用于向方框添加阴影，例如box-shadow: 10px 10px 5px #888888;第一个参数是阴影左缩进，第二个参数是阴影距离顶部的距离，第三个参数是阴影模糊程度（羽化），第四个参数是阴影颜色值。