border-left-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSSborder-left-width 属性用来设置盒子的左边框的宽度。

尝试一下

语法

css
/* 关键字数值  */
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/* 长度数值 */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/* 全局关键字 */
border-left-width: inherit;
border-left-width: initial;
border-left-width: unset;

数值

<br-width>

定义边框的宽度,或者作为显性非负的长度值 <length> 或者是关键字。如果他是一个关键字,它必须是下列值的一种:

  • thin 一个细边框
  • medium 一个中等边框
  • thick 一个粗边框

备注: 因为规范没有定义每个关键字表示的确切厚度,当使用其中之一的关键字时,需要具体实施才知道确切结果。不过,它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

形式语法

border-left-width = 
<line-width>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

示例

HTML

html
<div>Element 1</div>
<div>Element 2</div>

CSS

css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}

结果

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width
初始值medium
适用元素所有元素. It also applies to ::first-letter.
是否是继承属性
计算值绝对长度;或如果 border-left-style 的值为 nonehidden,则为 0
动画类型a length

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-left-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见