CSS盒子模型及属性
边框属性
1边框样式boder-style
在CSS属性中，boder-style属性用于设置边框样式
语法结构： border-style: 上边[右边 下边 左边];
在配置边框样式时，既可以单独为每条边分别定义样式参数（如上边缘、右边缘等），也可以一次性设定所有四条边的统一样式。border-style属性支持四种不同的样式设置。
solid 边框为单实线
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线
使用border-style属性综合设置四边样式时，应遵循上、右、下、左的顺时针顺序进行赋值，默认情况下会根据赋值数量默认扩展至相应边数（单个数值代表四角），若仅提供两个数值，则分别对应上下和左右两边；若提供三个数值，则分别对应上、左右和下三边；而当给出四个数值时，则依次代表上下左右四个方向。
在使用时需注意：因兼容性问题，在不同的浏览器中，点状线条（dotted）与虚线（dashed）的显示样式可能有所不同。
2 边框宽度boder-width
在CSS属性中，boder-width属性用于设置边框宽度
语法结构： border-width: 上边[右边 下边 左边];
在该语法格式中, border-width属性常见取值单位是像素px, 并且遵循规则. 其属性的设置范围包括1至4个数值. 单个数值对应四个边, 双个数值指定上下或左右边界, 三数值则涵盖上、左、下边界, 四数值则指定全部四个边界.
3 边框颜色boder-colo r
在CSS属性中，boder-color属性用于设置边框颜色
语法结构： border-color: 上边[右边 下边 左边];
在该语法结构中，border-width属性支持预先定义的颜色选项、十六进制#RRGGBB格式以及RGB代码rgb的形式，并同时遵循相同的复制原则。
值得注意的是，在CSS3标准中对boder-color属性进行了扩展。通过使用如boder-color attribute，则可以在设计中实现渐变效果并呈现出绚丽多姿的效果。沿用自boder-color这一基础特性，在此之上新增了4个相关的侧向功能。
boder-top-colors
boder-right-colors
boder-bottom-colors
boder-left-colors
这些边界属性允许指定四种类型的边界值：预定义的颜色值、常用于十六进制表示形式#RRGGBB以及RGB代码rgb(r,g,b)。此外，在这种情况下，在边界处可设置的颜色数量与其对应的边界宽度相同；具体而言，在这种情况下每种边缘色占据1像素宽。需要注意的是，在这种情况下当边界宽度设为10像素时，则只能有最多10种不同的边缘色可选；如果仅设置8种边缘色，则最后一种边缘色会自动填充剩余未使用的像素。
4综合设置边框
通过使用边框样式、颜色和宽度等属性虽然可以实现丰富多样的边框效果但这种方式书写的代码较为复杂度高且不利于直观阅读为此CSS提供了一种更为简便的边框设置方法其基本格式如下
boder:宽度 样式 颜色；
在设置方式上所述的情形中，在宽度参数、风格和色调的排列顺序上无需区分先后次序，并可选择仅配置必要的属性参数（其中风格属性不得省略）
当各边框样式互不相同时（即每一边都有独特的样式），或者仅需为某一边界设定特定样式时
5边框圆角
在网页设计过程中，默认情况下矩形会呈现直角状态，在应用CSS3技术时可以通过boder-radius属性来实现边框的圆角效果
语法结构：boder-radius: 参数1/参数2
在语法格式中所述的部分中，默认情况下border-radius属性由两个参数组成。这些参数既可以表示为像素值也可以表示为百分比。其中parameter 1指的是水平半径parameter 2指的是垂直半径这两个数值之间使用斜杠分隔
在操作过程中需要注意，在设置border-radius属性时，默认情况下若未提供第二个参数，则其等同于第一个参数。
值得注意的是，在样式表中与border-radius属性相关的实现细节也应特别关注。该属性遵循值复制策略，在设置水平方向延伸程度（由第一个参数控制）以及垂直方向延伸程度（由第二个参数控制）时均可使用1至4个单位长度的数值来定义周围圆角的半径大小。
6图片边框
在网页设计过程中，有时需要为区域整体添加一个图片边框。通过CSS3中的border-image属性可以轻松实现这一效果。该属性作为简写形式，主要用于设置border-image-source、border-image-slice、border-image-width、border-image-outset以及border-image-repeat等多个相关属性。
属性定义部分：border-image:border-image-source border-image-slice(border-imagereset)border-imagediameter/border-imageround;