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

语法

/* 关键字数值  */
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, 在单独文档中这些值内部是恒定不变的。

形式语法

<line-width>

where
<line-width> = <length> | thin | medium | thick

例子

HTML

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

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 Status Comment
CSS Backgrounds and Borders Module Level 3
border-left-width
Candidate Recommendation 没有规格变化.
CSS Level 2 (Revision 1)
border-left-width
Recommendation 没有规格变化
CSS Level 1
border-left-width
Recommendation 最初的定义

初始值medium
适用元素all elements. It also applies to ::first-letter.
是否是继承属性
适用媒体visual
计算值the absolute length or 0 if border-left-style is none or hidden
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 2.3Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

其他

文档标签和贡献者

标签: 
此页面的贡献者: ZZES_REN
最后编辑者: ZZES_REN,