本文讲述了简述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;

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。