为了分割页面中不同的盒子,常常需要给元素设置边框效果。
设置内容 样式属性 常用属性值
边框样式 border-style:上边 [右边 下边 左边]; none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度 border-width:上边 [右边 下边 左边]; 像素值
边框颜色 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框 border:四边宽度 四边样式 四边颜色;
圆角边框 border-radius:水平半径参数/垂直半径参数; 像素值或百分比
图片边框 border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;
在设置边框宽度时,必须同时设置边框样式,如果未设置样式或设置为none,则不论宽度设置为多少都无效。
注意:常用取值单位为像素。
p{
border-style:solid;
border-width:10px;
-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
}