--- title: outline-offset slug: Web/CSS/outline-offset tags: - CSS - CSS Outline - CSS Property - CSS プロパティ - CSS 輪郭線 - Reference - 'recipe:css-property' translation_of: Web/CSS/outline-offset --- <div>{{CSSRef}}</div> <p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p> <div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div> <div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> <p><ruby>輪郭線<rp> (</rp><rt>outline</rt><rp>) </rp></ruby>は要素の周囲、<ruby>境界線<rp> (</rp><rt>border</rt><rp>) </rp></ruby>の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。</p> <h2 id="Syntax" name="Syntax">構文</h2> <pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ outline-offset: 3px; outline-offset: 0.2em; /* グローバル値 */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; </pre> <h3 id="Values" name="Values">値</h3> <dl> <dt><code>{{cssxref("<length>")}}</code></dt> <dd>要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 <code>0</code> を指定すると輪郭線は要素との隙間を置かずに表示されます。</dd> </dl> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> {{csssyntax}} <h2 id="Example" name="Example">例</h2> <pre class="brush: css notranslate">p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } </pre> <pre class="brush: html notranslate"><p>Gallia est omnis divisa in partes tres.</p></pre> <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 Basic UI', '#outline-offset', 'outline-offset') }}</td> <td>{{ Spec2('CSS3 Basic UI') }}</td> <td>初回定義</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("css.properties.outline-offset")}}</p>