--- title: outline-offset slug: Web/CSS/outline-offset tags: - outline-offset translation_of: Web/CSS/outline-offset --- <div>{{CSSRef}}</div> <h2 id="概要">概要</h2> <p><strong><code>outline-offset</code></strong> CSS 属性用于设置 {{ cssxref("outline") }} 与一个元素边缘或边框之间的间隙。</p> <p>outline是元素的轮廓,悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说,它们之间的颜色会继承父元素的背景色。</p> <p>{{cssinfo}}</p> <p>The space will be transparent (the parent will determine the background).</p> <h2 id="Syntax" name="Syntax">Syntax</h2> <pre class="brush:css">/* <length> values */ outline-offset: 3px; outline-offset: 0.2em; /* Global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; </pre> <h3 id="Values">Values</h3> <dl> <dt><code><length></code></dt> <dd>元素和轮廓间的宽度. 详见 {{cssxref("<length>")}} . 负值将轮廓绘制在元素之内.</dd> </dl> <h3 id="Formal_syntax">Formal syntax</h3> {{csssyntax}} <h2 id="Examples">Examples</h2> <pre class="brush: css">p { outline: dashed thin; /* Move the outline 10px away from the border */ outline-offset: 10px; border:1px solid black; } </pre> <p>Html</p> <pre class="brush: html"><p>outline: offset 10px. Border is solid and outline is dashed</p></pre> <p>上面的代码将产生以下效果:</p> <p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> <p>另一个例子:</p> <p><span style="outline-offset: 1px; outline: green solid 3px;"><span style="outline-offset: 1px; outline: blue solid 3px;">outline: multiple offsets;</span></span></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 Transitions', '#animatable-css', 'outline-offset') }}</td> <td>{{ Spec2('CSS3 Transitions') }}</td> <td>Defines <code>outline-offset</code> as animatable.</td> </tr> <tr> <td>{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}</td> <td>{{ Spec2('CSS3 Basic UI') }}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> <p>{{ CompatibilityTable() }}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{CompatGeckoDesktop("1.8")}}</td> <td>{{ CompatNo() }}</td> <td>9.5</td> <td>1.2</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table> </div>