免费教程
CSS 中的边框是围绕着元素内容和内边距的一条或多条线段,您可以自定义这些线段的样式、宽度以及颜色。
Web前端教程
Web前端入门教程:CSS边框样式(1)
来源:易牛云朗沃
  |  
发布时间:2021-10-15 22:26
  |  
关键词:成都Web前端开发培训机构
  |  
阅读量:

CSS 中的边框是围绕着元素内容和内边距的一条或多条线段,您可以自定义这些线段的样式、宽度以及颜色。您可以通过下面几个属性分别定义边框的样式、宽度和颜色:

border-style:设置边框的样式,例如实线、虚线等;

border-width:设置边框的宽度(厚度);

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

border:上面三个边框属性的缩写。

1. border-style

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

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

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

成都Web前端开发培训机构

border-style 属性有多种不同的用法:

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

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

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

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

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

border-bottom-style:设置下边框的样式;

border-top-style:设置上边框的样式;

border-left-style:设置左边框的样式;

border-right-style:设置右边框的样式。

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

成都Web前端开发培训机构

成都Web前端开发培训机构

运行结果如下图所示:

成都Web前端开发培训机构

2. border-width

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

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

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

成都Web前端开发培训机构

thin、medium、thick 三个关键字并没有固定的值,它们的值取决于浏览器,例如在 Chrome 浏览器中三个关键字的值分别为 1px、3px、5px。

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

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

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

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

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

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

border-bottom-width:设置下边框的宽度;

border-top-width:设置上边框的宽度;

border-left-width:设置左边框的宽度;

border-right-width:设置右边框的宽度。

【示例】使用 border-width 设置边框的宽度:

成都Web前端开发培训机构

运行结果如下图所示:

成都Web前端开发培训机构

点击知道更多编程知识

文章来源于网络