本节我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。
关于边框样式的四个属性:
![d7fc5062cde369f4de8330c62fc75233.png](https://i-blog.csdnimg.cn/blog_migrate/af66eaf5b7f06afdb9718269926d4fc0.jpeg)
border-width
border-width 属性用于设置边框的宽度,也就是边框的粗细。
常用属性值如下所示:
![8b0a1ac73cb9c245a5047def0ee3a6f8.png](https://i-blog.csdnimg.cn/blog_migrate/c512aa72fec3a2241bbb0c5518768932.jpeg)
我们一般会使用 length 作为 border-width 属性的属性值,即设置边框的粗细为多少像素,例如 1px、2px、3px 等。border-width 属性可以同时为所有边框设置宽度,也可以单独地为每个边框设置宽度。
示例:
为上、右、下、左四个边框分别设置边框粗细:
border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;
根据简写属性 border-width,我们也可以直接写成:
border-width:1px 2px 3px 4px;
记住在简写时,为边框设置宽度的顺序为 上、右、下、左,是顺时针顺序。
而当元素的上下边框或左边框的宽度一致时,也可以使用简写,例如上下边框为1px、左右边框为2px,可以写成:
border-width:1px 2px;
border-style
border-style 属性用于设置元素的边框样式。和 border-width 一样,可以同时为四个边框设置边框样式,也可以分别为每个边框单独设置边框样式。
border-style 的属性值有很多个,但是在实际网页制作中,常用属性值有下面四种:
![d406908823b7d499b91f185772002756.png](https://i-blog.csdnimg.cn/blog_migrate/a987997dab80e63a078b842ecf2dff67.jpeg)
示例:
例如设置上、右、下、左的边框样式为实线、虚线、实线、虚线:
border-top-style:solid;border-right-style:dashed;border-bottom-style:solid;border-left-style:dashed;
可以简写成:
border-style: solid dashed solid dashed;
当元素的上下边框和左右边框样式一致时,也可以写成:
border-style: solid dashed;
border-color
border-color 属性可以用于设置边框颜色。属性值可以是任何合法的颜色值,例如颜色名、十六进制颜色值、RGB颜色值等。
border-color 属性同样可以同时设置四个边框的颜色,也可以单独设置四条边框的颜色。
示例:
例如设置上、右、下、左边框颜色为红黄蓝绿:
border-top-color:red;border-right-color:yellow;border-bottom-color:blue;border-left-color:green;
可以简写为:
border-color:red yellow blue green;
border
上面我们讲了 border-width、border-style、border-color 三个属性,但是其实我们在实际应用中,一般不会单独来设置边框宽度或者颜色等,而是直接使用通过 border 简写属性来设置所有的边框属性。
border 属性可以直接设置所有边框的样式,如果要单独设置每个边框的样式则可以使用 border-top、border-right、border-bottom、border-left。
示例:
将下面这个
CSS学习(9xkd.com)
设置一个边框
CSS 样式代码:
div{ width: 100px; height: 100px; border:3px dashed purple;}
在浏览器中的演示效果:
![71e84ff4085e819e3240c15f9b7a519e.png](https://i-blog.csdnimg.cn/blog_migrate/e777c9d4dc49609ac7f74014900a192f.jpeg)
链接:https://www.9xkd.com/