免费教程
border-color 属性用来设置元素中所有边框的颜色,或者单独为某个边框设置颜色……
Web前端教程
Web前端入门教程:CSS边框样式(2)
来源:易牛云朗沃
  |  
发布时间:2021-10-15 22:29
  |  
关键词:成都Web前端开发培训机构
  |  
阅读量:

3. border-color

border-color 属性用来设置元素中所有边框的颜色,或者单独为某个边框设置颜色,其语法格式如下:

border-color: border-top-color border-right-color border-bottom-color border-left-color;

border-color 属性的可选值如下:

成都Web前端开发培训机构

同 border-style 属性相同,border-color 属性同样支持多种不同的用法:

如果提供全部的四个参数,则会按照上、右、下、左的顺序分别设置边框四个边的颜色;

如果提供三个参数,那么第一个参数会作用在上边框,第二个参数会作用在左、右两个边框上,第三个参数会作用在下边框上;

如果提供两个参数,那么第一个参数会作用在上、下两个边框上,第二个参数会作用在左、右两个边框上;

如果只提供一个参数,这个参数将同时作用在四个边框上。

除了可以使用 border-color 属性设置元素的边框颜色外,您还可以使用下面的属性分别设置元素上、下、左、右四个边框的颜色:

border-bottom-color:设置下边框的颜色;

border-top-color:设置上边框的颜色;

border-left-color:设置左边框的颜色;

border-right-color:设置右边框的颜色。

【示例】使用 border-color 设置边框的颜色:

成都Web前端开发培训机构

运行结果如下图所示:

成都Web前端开发培训机构

4. border

border 属性是上面介绍的 border-width、border-style、border-color 三种属性的简写,使用 border 属性可以同时定义上述三个属性,语法格式如下:

border: border-width border-style border-color;

其中 border-width 用来设置边框的宽度;border-style 用来设置边框的样式;border-color 用来设置边框的颜色。

【示例】使用 border 属性为元素设置边框:

成都Web前端开发培训机构

运行结果如下图所示:

成都Web前端开发培训机构

提示:border 属性的三个参数(border-width、border-style、border-color)并不需要遵守固定的顺序,将它们的顺序打乱也是可以的。另外,也可以省略其中的某个参数,例如border: soild red;,省略的参数将被设置为该参数的默认值。

除了可以使用 border 属性统一设置边框的宽度、样式、颜色外,您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度、样式、颜色:

border-bottom:统一设置下边框的宽度、样式、颜色;

border-top:统一设置上边框的宽度、样式、颜色;

border-left:统一设置左边框的宽度、样式、颜色;

border-right:统一设置右边框的宽度、样式、颜色。

通过组合本节中介绍这些属性,可以实现一些意想不到的效果,例如我们可以通过边框来绘制三角形,示例代码如下:

成都Web前端开发培训机构

运行结果如下图所示:

成都Web前端开发培训机构

点击知道更多编程知识

文章来源于网络