initial commit

1 files changed, 133 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/outline-width/index.html b/files/zh-cn/web/css/outline-width/index.html
new file mode 100644
index 0000000000..80e5b04b2e
--- /dev/null
+++ b/files/zh-cn/web/css/outline-width/index.html
@@ -0,0 +1,133 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+translation_of: Web/CSS/outline-width
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS 属性 <strong><code>outline-width</code></strong> 用于设置一个元素的轮廓的厚度。元素轮廓是绘制于元素周围的一条线，位于 {{cssxref("border")}} 的外围。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
+
+
+
+<p>大多情况下用简写属性 {{cssxref("outline")}} 定义轮廓外观会更方便。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* &lt;length&gt; values */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Global values */
+outline-width: inherit;
+</pre>
+
+<p><code>outline-width</code> 的值可以是下面列表中的任一项。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>The width of the outline specified as a <code>&lt;length&gt;</code>.</dd>
+ <dt><code>thin</code></dt>
+ <dd>取决于用户代理。通常等同于桌面浏览器的 <code>1px</code> （包括 Firefox）。</dd>
+ <dt><code>medium</code></dt>
+ <dd>取决于用户代理。通常等同于桌面浏览器的 <code>3px</code> （包括 Firefox）。</dd>
+ <dt><code>thick</code></dt>
+ <dd>取决于用户代理。通常等同于桌面浏览器的 <code>5px</code>（包括 Firefox）。</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="thin"&gt;thin&lt;/span&gt;
+&lt;span id="medium"&gt;medium&lt;/span&gt;
+&lt;span id="thick"&gt;thick&lt;/span&gt;
+&lt;span id="twopixels"&gt;2px&lt;/span&gt;
+&lt;span id="oneex"&gt;1ex&lt;/span&gt;
+&lt;span id="em"&gt;1.2em&lt;/span&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+</pre>
+
+<p>{{EmbedLiveSample('Examples', '100%', '80')}}</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 Basic UI', '#outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>outline-width</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.outline-width")}}</p>