initial commit

1 files changed, 175 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/border-width/index.html b/files/zh-cn/web/css/border-width/index.html
new file mode 100644
index 0000000000..43ff5baa94
--- /dev/null
+++ b/files/zh-cn/web/css/border-width/index.html
@@ -0,0 +1,175 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p> <strong><code>border-width</code></strong> 属性可以设置盒子模型的边框宽度。</p>
+
+<p>{{EmbedInteractiveExample("pages/css/border-width.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>它是{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, 和 {{cssxref("border-left-width")}}的简写;</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css">/* 用法一：明确指定宽度值 */
+/* 当给定一个宽度时，该宽度作用于选定元素的所有边框<em> */
+</em>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;
+
+</pre>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<dl>
+ <dt>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;">关键字</td>
+    <td style="vertical-align: middle;">实例</td>
+    <td style="vertical-align: middle;">说明</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;">
+</div>
+    </td>
+    <td style="vertical-align: middle;">细边线</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;">
+</div>
+    </td>
+    <td style="vertical-align: middle;">中等边线</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;">
+</div>
+    </td>
+    <td style="vertical-align: middle;">宽边线</td>
+   </tr>
+  </tbody>
+ </table>
+ </dt>
+ <dd></dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>提示：</strong>规范并没有规定关键字的实际值故在不同浏览器效果是不一样的，但显然thin≤medium≤thick，并且值在单个文档中是恒定的</p>
+</div>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">A mix of values and lengths</h3>
+
+<p id="A_mix_of_values_and_lengths">HTML</p>
+
+<pre class="brush: html">&lt;p id="sval"&gt;
+    one value: 6px wide border on all 4 sides&lt;/p&gt;
+&lt;p id="bival"&gt;
+    two different values: 2px wide top and bottom border, 10px wide right and left border&lt;/p&gt;
+&lt;p id="treval"&gt;
+    three different values: 0.3em top, 9px bottom, and zero width right and left&lt;/p&gt;
+&lt;p id="fourval"&gt;
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#sval {
+    border: ridge #ccc;
+    border-width: 6px;
+}
+#bival {
+    border: solid red;
+    border-width: 2px 10px;
+}
+#treval {
+    border: dotted orange;
+    border-width: 0.3em 0 9px;
+}
+#fourval {
+    border: solid lightgreen;
+    border-width: thin medium thick 1em;
+}
+p {
+    width: auto;
+    margin: 0.25em;
+    padding: 0.25em;
+}</pre>
+
+<h4 id="运行结果">运行结果</h4>
+
+<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}</p>
+
+<h2 id="Specifications">Specifications</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-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct change, the {{cssxref("&lt;length&gt;")}} CSS data type extension has an effect on this property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added the constraint that values' meaning must be constant inside a document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.border-width")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
+ <li>The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
+</ul>