CSS常用样式
3.边框样式
1）边框线
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
常用的边框线：dotted（点状）、dashed（虚线）、solid（实线）、double（双实线）
border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
例子：
/* CSS代码 */ .style{ width:100px; height:100px; border-top-style:dotted; border-bottom-style:dashed; border-left-style:solid; border-right-style:double; }
<!-- HTML代码 --> <body> <div class="style"></div> </body>
效果：
2）边框宽度
border-width : thin | medium | thick | length
thin（细边框）、medium（中等边框）、thick（粗边框）、length（数值px）
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
例子：
/* CSS代码 */ .width{ width:100px; height:100px; border-style:solid; border-top-width:thin; border-bottom-width:medium; border-left-width:thick; border-right-width:10px; }
<!-- HTML代码 --> <body> <div class="width"></div> </body>
效果：
3）边框颜色
border-color: color
color取值：英文单词、十六进制、RGB
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
例子：
/* CSS代码 */ .color{ width:100px; height:100px; border-style:solid; border-color:5px; border-top-color:yellow; border-bottom-color:green; border-left-color:#f00000; border-right-color:rgb(0,0,0); }
<!-- HTML代码 --> <body> <div class="color"></div> </body>
效果：
4）边框样式缩写
border : border-width border-style border-color
例子：
div { width:100px; height:100px; border-width:1px; border-style:solid; border-color:#FF0000; }
缩写后：
div { width:100px; height:100px; border:1px solid #FF0000; }
5）圆角效果
border-radius: length | percentage
向元素添加圆角表框。有一下几种情况：
1、所有角都使用半径为10px的圆角
div{ border-radius:10px;}
2、四个半径值分别是左上角、右上角、右下角和左下角，顺时针方向
div{ border-radius: 10px 20px 30px 40px; }
3、设置每个角的水平半径和垂直半径,用斜杠隔开
div{ border-radius:40px/20px; }
4、圆形
div{ border-radius:50% }
6）边框图片
border-image
边框样式使用图像来填充
设置了border-image后，border-style则不显示
7）盒子阴影
box-shadow: none | shadow
box-shadow: 水平偏移量 垂直偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
其中，水平和垂直的偏移量必写，其它各自展示不同的效果。
1、外阴影常规效果：
/* CSS代码 */ .outset{ width:100px; height:100px; background:#000; box-shadow:5px 5px #ccc; }
<!-- HTML代码 --> <body> <div class="outset"></div> </body>
2、外阴影模糊效果：
/* CSS代码 */ .outset-blur{ width:100px; height:100px; background:#000; box-shadow:5px 5px 10px #000; }
<!-- HTML代码 --> <body> <div class="outset-blur"></div> </body>
3、外阴影模糊外延效果：
/* CSS代码 */ .outset-extension{ width:100px; height:100px; background:#000; box-shadow:5px 5px 10px 10px #f00; }
<!-- HTML代码 --> <body> <div class="outset-extension"></div> </body>
4、内阴影常规效果：
/* CSS代码 */ .inset{ width:100px; height:100px; background:#ccc; box-shadow:5px 5px #000 inset; }
<!-- HTML代码 --> <body> <div class="inset"></div> </body>
5、内阴影模糊效果：
/* CSS代码 */ .inset-blur{ width:100px; height:100px; background:#ccc; box-shadow:5px 5px 10px #000 inset; }
<!-- HTML代码 --> <body> <div class="inset-blur"></div> </body>
*在下一篇博文中，会说到关于边框样式和盒子阴影应用到网页中的效果。