html5 border长度,CSS属性参考 | border-width

border-width属性的值可以是一个，两个，三个或四个。这些值可以是CSS 数据类型，或者是3个预定义的CSS边框宽度关键字之一：thin，medium或thick。

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

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

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

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

官方语法

border-width: {1,4}

/* 其中 */

= | thin | medium | thick

参数：

：使用数据类型来指定元素边框的宽度。

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。

相关阅读