元素边框宽度 border-width
Docs
元素边框宽度
border-width 属性可以设置盒子模型的边框宽度。
它是border-top-width, border-right-width, border-bottom-width 和 border-left-width的简写;
border-width 不支持百分比值
所谓"边框"，是不会因为设备大就按比例变大的。因此，如果支持百分比值，是不是就意味着设备大了边框也跟着变大？这显然不合"边框"的语义。
/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;
/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;
/* 用法三：使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;
语法
border-width =
<line-width>{1,4}
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
| 关键字 | 说明 |
|---|---|
thin | 细边线 |
medium | 中等边线 |
thick | 宽边线 |
备注
规范并没有规定关键字的实际值故在不同浏览器效果是不一样的，但显然 thin ≤ medium ≤ thick，并且值在单个文档中是恒定的。
一般情况下，thin 的值为 1px，medium 的值为 3px，thick 的值为 4px。
规范
