概要
CSSプロパティ「outline-style」は、アウトライン（輪郭線）のスタイルを指定することができます。ショートハンドで記述する方法は outline プロパティを使います。
<p class="solid">solidを指定します</p>
<p class="dotted">dottedを指定します</p>
<style>
p {
outline-color: orange;
outline-width: 5px;
}
.solid { outline-style: solid; }
.dotted { outline-style: dotted; }
</style>このプロパティには様々なアウトライン装飾が用意されており、以下一覧です。
| 値 | 説明 |
|---|---|
| none | アウトラインは表示されません |
| solid | 一本線のアウトラインが表示されます |
| dotted | １列にならんだドット模様のアウトラインが表示されます |
| dashed | 破線のアウトラインが表示されます |
| double | 二本線のアウトラインが表示されます |
| groove | 立体的で窪んだ線が表示されます |
| ridge | 立体的で隆起した線が表示されます |
| inset | grooveと似てますが立体的で窪んだ線が表示されます |
| outset | ridgeと似てますが、立体的で隆起した線が表示されます |
使用例
実際のスタイルがこちらになります。
<p class="solid">solidを指定します</p>
<p class="dotted">dottedを指定します</p>
<p class="dashed">dashedを指定します</p>
<p class="double">doubleを指定します</p>
<p class="groove">grooveを指定します</p>
<p class="ridge">ridgeを指定します</p>
<p class="inset">insetを指定します</p>
<p class="outset">outsetを指定します</p>
<style>
p {
outline-color: orange;
outline-width: 5px;
}
.solid { outline-style: solid; }
.dotted { outline-style: dotted; }
.dashed { outline-style: dashed; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge { outline-style: ridge; }
.inset { outline-style: inset; }
.outset { outline-style: outset; }
</style>