initial commit

1 files changed, 135 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/outline/index.html b/files/zh-cn/web/css/outline/index.html
new file mode 100644
index 0000000000..64d1db06c4
--- /dev/null
+++ b/files/zh-cn/web/css/outline/index.html
@@ -0,0 +1,135 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS属性
+  - CSS轮廓
+  - 参考
+  - 布局
+  - 轮廓
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> 的 <code>outline</code> 属性是在一条声明中设置多个轮廓属性的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a> ， 例如 {{cssxref("outline-style")}}, {{cssxref("outline-width")}} 和 {{cssxref("outline-color")}}。 </p>
+
+<p>{{EmbedInteractiveExample("pages/css/outline.html")}}</p>
+
+<p>与其他简写属性一样，忽略的子属性会被设为 <a href="/zh-CN/docs/Web/CSS/initial_value">初始值</a>。</p>
+
+<h3 id="border_和_outline">border 和 outline</h3>
+
+<p><a href="/zh-CN/docs/Web/CSS/border">border</a> 和 outline 很类似，但有如下区别：</p>
+
+<ul>
+ <li>outline不占据空间，绘制于元素内容周围。</li>
+ <li>根据规范，outline通常是矩形，但也可以是非矩形的。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="notranslate">/* 样式 */
+outline: solid;
+
+/* 颜色 | 样式 */
+outline: #f66 dashed;
+
+/* 样式 | 宽度 */
+outline: inset thick;
+
+/* 颜色 | 样式 | 宽度 */
+outline: green solid 3px;
+
+/* 全局值 */
+outline: inherit;
+outline: initial;
+outline: unset;</pre>
+
+<p><code>outline</code> 属性可使用以下一个、两个或三个值来声明，且顺序不重要。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong>对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 <code>none</code>。但 <code>input</code> 元素是例外，其样式默认值由浏览器决定。</p>
+</div>
+
+<h3 id="Values" name="Values">取值</h3>
+
+<dl>
+ <dt><strong><code>&lt;'outline-color'&gt;</code></strong></dt>
+ <dd>设置轮廓的颜色。没有设置时默认值为 <code>currentcolor</code>。参见 {{cssxref("outline-color")}}。</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>设置轮廓的样式。没有设置时默认值为 <code>none</code>。参见 {{cssxref("outline-style")}}。</dd>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>设置轮廓的宽度。没有设置时默认值为 <code>medium</code>。参见 {{cssxref("outline-width")}}。</dd>
+</dl>
+
+<h3 id="形式语法">形式语法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax("outline")}}</pre>
+
+<h2 id="Examples" name="Examples">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="notranslate">&lt;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="notranslate">a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<h2 id="可访问性考虑">可访问性考虑</h2>
+
+<p>将 <code>outline</code> 设置为 <code>0</code> 或 <code>none</code> 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。</p>
+
+<ul>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
+ <li>
+  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
+ </li>
+</ul>
+
+<h2 id="规范">规范</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 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("css.properties.outline")}}</p>