files/zh-cn/web/css/border-left-width/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

---
title: border-left-width
slug: Web/CSS/border-left-width
tags:
  - CSS
  - CSS属性
  - CSS边框
translation_of: Web/CSS/border-left-width
---
<div>{{CSSRef}}</div>

<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> 的 <strong><code>border-left-width</code></strong> 属性用来设置盒子的左边框的宽度。</p>

<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div>


<h2 id="语法">语法</h2>

<pre class="brush:css no-line-numbers">/* 关键字数值  */
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;</pre>

<h3 id="数值">数值</h3>

<dl>
 <dt><code>&lt;br-width&gt;</code></dt>
 <dd>定义边框的宽度，或者作为显性非负的长度值 {{cssxref("&lt;length&gt;")}} 或者是关键字. 如果他是一个关键字，它必须是下列值的一种：
 <table>
  <tbody>
   <tr>
    <td><code>thin</code></td>
    <td>
     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"> </div>
    </td>
    <td>一个细边框</td>
   </tr>
   <tr>
    <td><code>medium</code></td>
    <td>
     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"> </div>
    </td>
    <td>一个中等边框</td>
   </tr>
   <tr>
    <td><code>thick</code></td>
    <td>
     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"> </div>
    </td>
    <td>一个粗边框</td>
   </tr>
  </tbody>
 </table>

 <div class="note">
 <p><strong>笔记:</strong> 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 <code>thin ≤ medium ≤ thick</code>, 在单独文档中这些值内部是恒定不变的。</p>
 </div>
 </dd>
</dl>

<h3 id="形式语法">形式语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="例子">例子</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;Element 1&lt;/div&gt;
&lt;div&gt;Element 2&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample('Example', '100%')}}</p>

<h2 id="规格">规格</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>没有规格变化.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>没有规格变化</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>最初的定义</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("css.properties.border-left-width")}}</p>

<h2 id="其他">其他</h2>

<ul>
 <li>The other border-width-related CSS properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.</li>
 <li>The other border-left-related CSS properties: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, and {{Cssxref("border-left-color")}}.</li>
</ul>