边框的介绍
边框的基本属性
border：border-width border-style border-color
border-width
border-color
border-top-colors
border-bottom-colors
border-left-colors
border-right-colors
注意：分开写时，colors多了一个s的，不然错误
border-style
none 无定义
hidden 没有边框
dotted 点状线边框样式
dashed 虚线样式
solid 实线样式
double 双线样式
groove 定义3D凹槽边框
ridge 定义3D垄状边框
inset 定义inset边框
outset 定义outset边框
inherit 继承父级元素的样式
边框圆角属性
取值方式
没有斜线
取一个值 四个角
取两个值 1左上右下，2左下右上
取三个值 1左上，2右上左下，3右下
取四个值 1左上，2右上，3右下，4左下
有斜线
反斜杠左边是水平半径，右边是垂直半径
取值格式
border-radius:100px/200px; 取一个值，四个角
border-radius:10px 200px 120px 40px / 100px 20px 40px 100px; 取四个值，四个角 角的顺序同上（斜杠左边的四个值分别是左上，右上，右下，左下的水平半径，斜杠右边是左上，右上，右下，左下的垂直半径）
单独设置某个角（单独某个角的设置，不需要返斜杠/ 直接设置两个值，即代表水平半径和垂直半径）
border-top-left-radius:10px 100px;
border-top-right-radius:100px 10px;
border-bottom-left-radius:100px 10px;
border-bottom-right-radius:100px 10px;
注释：单独某个角的设置，不需要返斜杠/ 直接设置两个值，即代表水平半径和垂直半径
注意
1.边的宽度大于设置的半径长度，则内角没有圆弧
2.border-radius是css3属性，使用时最好添加前缀
3.圆角在img和table的应用上差点（体现在浏览器兼容上 img在safari上没有效果 table上的应用在现代浏览器中已经能够兼容了）
兼容性 ie 9+ 火狐 3+ chrome 1.0+ 欧朋 10.5+ Safari 3+
盒子阴影属性
6个参数（按照顺序）
1.横向阴影（外侧 可负数）
2.纵向阴影（外侧 可负数）
3.阴影模糊半径（0以上，不可负值）
4.阴影扩展半径（可负数）
5.阴影颜色
6（inset）顺序可第一，或最后，控制内侧阴影
注意：阴影扩展出来的位置，不算在盒子的宽高上，不影响盒子模型的长宽变化
该属性只能对盒子有效，对img没有效果，使用时可以在外层嵌套一个div盒子
多重阴影
每设置一个阴影，用逗号隔开，继续写下一个阴影
box-shadow:1px 1px 1px 1px red,
1px 1px 1px 1px orange，
3px 3px 6px 3px yellow,
4px 4px 8px 4px green,
5px 5px 9px 5px skyblue,
6px 6px 10px 6px blue,
多层阴影层级是第一个阴影为最上层，所以要注意多层时，上层阴影半径是否大于下层的半径
浏览器兼容性 IE9+ 低版本IE可以用滤镜模拟，火狐3.5+ ，chrome2+ ， 欧朋10+，Safari4+
网友评论