---
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>

{{csssyntax}}

<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>