CSS盒子模型相关属性
边框属性
1边框样式boder-style
在CSS属性中，boder-style属性用于设置边框样式
语法结构： border-style: 上边[右边 下边 左边];
在设置边框样式时既可以针对四条边分别设置，也可以综合设置四条边的样式。boder-style属性的常用属性值有4个，分别用于定义不同的显示样式，具体如下。
- solid 边框为单实线
- dashed 边框为虚线
- dotted 边框为点线
- double 边框为双实线
使用boder-style 属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。
需要注意的是，由于兼容性的问题，在不同的浏览器中的点线dotted和虚线dashed的显示样式可能会略有差异。
2边框宽度boder-width
在CSS属性中，boder-width属性用于设置边框宽度
语法结构： border-width: 上边[右边 下边 左边];
在上面的语法格式中，boder-width属性常用取值单位为像素px。并且同样遵循值复制的原则，其属性值可以设置1~4个，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。
3边框颜色boder-color
在CSS属性中，boder-color属性用于设置边框颜色
语法结构： border-color: 上边[右边 下边 左边];
在上面的语法格式中，boder-width的属性值可以预定义的颜色值、十六进制#RRGGBB（做常用）或RGB代码rgb（r,g,b），并且同样遵循值复制的原则，其属性值可以设置1~4个。
值得一提的是，在CSS3中对边框颜色属性进行了增强，运用该属性可以制作渐变的绚丽的边框效果。CSS在原边框颜色属性（boder-color）的基础上派生了4个边框颜色属性。
- boder-top-colors
- boder-right-colors
- boder-bottom-colors
- boder-left-colors
上面的4个边框属性的属性值同样可以为预定义的颜色值、十六进制#RRGGBB（做常用）或RGB代码rgb（r,g,b）。并且，每个属性最多可以设置的边框颜色数和其边框相等，这时，每种边框颜色占1px宽度，边框颜色从外向内渲染。例如，边框的宽度是10px，那它最多可以设置10种边框颜色。需要注意的是，如果边框的宽度为10px，却只设置了8种边框颜色，那么最后一个边框色将自动渲染剩余的宽度。
4综合设置边框
使用boder-style、border-color、boder-width虽然可以实现丰富的边框效果，但是这种方式书写的代码烦琐，且不便于阅读，为此CSS提供了更简单的边框设置方式，其基本格式如下。
boder:宽度 样式 颜色；
上面的设置方式中，宽度、样式、颜色的顺序不分前后，可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。
当每一侧的边框样式都不相同，或者只需单独定义某一侧的边框时，可以使用单侧边框的综合属性boder-top、boder-bottom、boder-left、或boder-right进行设置。
5边框圆角
在网页设计中，经常需要设置圆角边框，运用CSS3中的boder-radius属性可以将矩形边框圆角化。
语法结构：boder-radius: 参数1/参数2
在上面的语法格式中，boder-radius的属性值包含2个参数，它们的取值可以为像素值或百分比。其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用“/”隔开。
需要注意的是，在使用boder-radius属性时，如果第二个参数省略，则会默认等于第一个参数。
值得一提的是，boder-radius属性同样遵循值复制的原则，其水平半径（参数1）和垂直半径（参数2）均可以设置1~4个参数值，用来表示四周圆角半径的大小。
6图片边框
在网页设计中，有时需要对区域整体添加一个图片边框，运用CSS3中的boder-image属性可以轻松实现这个效果。boder-image属性是一个简写属性，用于设置boder-image-source、boder-image-slice、border-image-width、boder-image-outset以及border-image-repeat等属性。
语法结构：boder-image:boder-image-source boder-image-slice/boder-image-width/boder-image-outset boder-image-repeat;
