当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | border-width

CSS属性参考 | border-width

05-12

border-width属性是用于设置一个元素的边框宽度的简写属性。它可以同时设置一个元素的border-top-widthborder-right-widthborder-bottom-widthborder-left-width属性。

border-width属性的值可以是一个,两个,三个或四个。这些值可以是CSS <length>数据类型,或者是3个预定义的CSS边框宽度关键字之一:thinmediumthick

如果只为border-width属性设置一个值,那么元素的4个边框都使用该值来设置边框的宽度。

如果为border-width属性设置了两个值,那么第一个值指定元素上下边框的宽度,第二个值指定元素左右边框的宽度。

如果为border-width属性设置了三个值,那么第一个值指定元素上边框的宽度,第二个值指定元素左右边框的宽度,第三个值指定元素下边框的宽度。

如果为border-width属性设置了四个值,那么第一个值指定元素上边框的宽度,第二个值指定元素右边框的宽度,第三个值指定元素下边框的宽度,第四个值指定元素左边框的宽度。

官方语法
border-width: <border-width>{1,4}
/* 其中 */
<border-width> = <length> | thin | medium | thick
                            

参数:

  • <length>:使用<length>数据类型来指定元素边框的宽度。
  • thin:边框的预定义宽度关键字。
  • medium:边框的预定义宽度关键字。
  • thick:边框的预定义宽度关键字。

border-width属性的初始值是它包含的各个具体边框宽度属性的初始值:

border-width属性可以使用inherit关键字从父元素中继承边框宽度。

在使用3个预定义宽度关键字时要注意,由于规范中并没有明确指出每一个关键字的具体宽度是多少,各个浏览器对于各个关键字的解释有所不同。因此在使用关键字作为边框的宽度时,在各个浏览器中渲染出来的实际边框宽度会有所差异。

应用范围

border-width属性可以应用在所有元素上。

示例代码

下面是border-width属性取值的一些示例代码。

/* border-width: width */
border-width: 5px;

/* 上下 | 左右 */
border-width: 2px 1.5em;

/* 上 | 左右 | 下 */
border-width: 1px 2em 1.5cm;

/* 上 | 右 | 下 | 左 */
border-width: 1px 2em 0 4rem;

border-width: inherit;                              
                            
在线演示

下面的例子使用border-width属性为元素设置边框宽度。

边框宽度为:50px 10px 10px 10px
.element {
    border-style: solid;
    border-width: 50px 10px 10px 10px;
    border-color: #22a7f0;
}                              
                            

下载源代码

浏览器支持

所有的现代浏览器都支持border-left-width属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。

相关阅读
Previous:
上一篇:CSS属性参考 | border-top-right-radius
Next:
下一篇:CSS属性参考 | border-color
返回顶部