We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

形式语法

<br-width>

where
<br-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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support112143.51
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.3 ? Yes4111 ?

其他

文档标签和贡献者

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