概要
CSSプロパティ「outline-color」は、アウトライン（輪郭線）の色を指定することができます。ショートハンドで記述する方法は outline プロパティを使います。
<p>初期値のアウトラインを表示</p>
<p class="outline-color">アウトラインカラーを変更します</p>
<style>
p {
background: #def;
outline: solid;
}
.outline-color {
outline-color: #ddd;
}
</style>| 値 | 説明 |
|---|---|
| color | 色を指定します. #000000やrgb(0,0,0)でも指定できます |
| invert | 初期値。ブラウザ依存の地の色を反転させた色を使います |
指定する色については color プロパティに詳細が掲載されています。
使用例
button要素が押されたときに表示されてるoutlineの色を変えてみます。
<p>それぞれのボタンを押してみてください</p>
<button>初期設定のアウトライン色です</button><br>
<button class="outline-color">アウトラインの色を設定しました</button>
<style>
button {
background: #eef;
border: 1px solid #ddd;
padding: 8px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
margin-bottom: 10px;
}
.outline-color {
outline-color: green;
}
</style>