1 files changed, 134 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/border/index.html b/files/zh-cn/web/css/border/index.html
new file mode 100644
index 0000000000..4dd16768c2
--- /dev/null
+++ b/files/zh-cn/web/css/border/index.html
@@ -0,0 +1,134 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS_参考
+translation_of: Web/CSS/border
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">概览</h2>
+
+
+
+<p><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>的border属性是一个用于设置各种单独的边界属性的<a href="Shorthand_properties">简写属性</a>。<code>border可以用于设置一个或多个以下属性的值：</code> {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}。</p>
+
+
+
+<p>{{EmbedInteractiveExample("pages/css/border.html")}}</p>
+
+<p>和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对{{cssxref("border-image")}}属性的影响，虽然border属性不能设置这个属性，但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。</p>
+
+<div class="note style-wrap">
+<p><strong>注意：</strong> 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色，但boder属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。</p>
+</div>
+
+<h3 id="Borders_vs._outlines">Borders vs. outlines</h3>
+
+<p><code>边界border</code>和轮廓<code>outline</code>很相似。然而轮廓在以下方面与边界不同</p>
+
+<ul>
+ <li>轮廓不占据空间，他们在元素内容之外绘制</li>
+ <li>根据规范，轮廓不必为矩形，尽管通常是矩形。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre>/* style */
+border: solid;
+
+/* width | style */
+border: 2px dotted;
+
+/* style | color */
+border: outset #f33;
+
+/* width | style | color */
+border: medium dashed green;
+
+/* Global values */
+border: inherit;
+border: initial;
+border: unset;</pre>
+
+<p>可以使用下面列出的一个，两个或三个值来指定<code>border</code>属性。 值的顺序无关紧要。</p>
+
+<div class="blockIndicator note">
+<p>注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。</p>
+</div>
+
+<h3 id="Values" name="Values">取值</h3>
+
+<dl>
+ <dt>border-width</dt>
+ <dd>请看 {{ Cssxref("border-width") }}.</dd>
+ <dt>border-style </dt>
+ <dd>请看 {{ Cssxref("border-style") }}.</dd>
+ <dt>border-color </dt>
+ <dd>{{cssxref("&lt;color&gt;")}} 可以确定border的颜色。如果这个值没有设置，它的默认值是元素的{{cssxref("color")}}属性值（是文字颜色而非背景色）。 请看{{ Cssxref("border-color") }}.</dd>
+ <dt>
+ <h3 id="正式语法">正式语法</h3>
+
+ <pre><code>{{csssyntax}}</code></pre>
+ </dt>
+</dl>
+
+<h2 id="Examples" name="Examples">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div&gt;I have a border, an outline, AND a box shadow! Amazing, isn't it?&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>在理论上删除了对<code>transparent</code>的支持，因为{{cssxref("&lt;color&gt;")}}已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。<br>
+    虽然border不能给{{cssxref("border-image")}}赋特定的值，但可以用于重置{{cssxref("border-image")}}为初始值(<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>
+    <p>加入<code>inherit</code>关键字。<br>
+     接受transparent作为有效的颜色值。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("css.properties.border")}}</p>