概要
CSS の outline-color プロパティは、要素のアウトラインの色を設定します。アウトラインとは、要素を囲むようにボーダー境界の外側に描かれる線で、要素を目立たせます。
| 初期値 | ブラウザが invert をサポートしていればinvert、それ以外では currentColor |
|---|---|
| 適用対象 | 全要素 |
| 継承 | 不可 |
| メディア | visual, interactive |
| 計算値 | キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparent は rgb(0,0,0) にマップされます |
| アニメーションの可否 | 可。 の値として補完しますcolor |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
<color> | invertwhere
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
outline-color: invert outline-color: red outline-color: inherit
値
<color>- さまざまな色を表すキーワードや記法について、
<color>をご覧ください invert- アウトラインがよく見えるように、背景の反転色を使います。フォーカスの縁取りを、背景色によらずもっと目立たせることができます。この機能のサポートはブラウザに要求されていないことに注意してください。サポートされていなければ、式は単に無効値と解釈されます
例
次の CSS は:
.example {
/* make the outline blue */
outline-color: #0000FF;
}
次の色つきの 2px のアウトラインを作ります:
outline-color is blue.
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Basic User Interface Module Level 3 outline-color の定義 |
勧告候補 | 変更なし |
| CSS Transitions outline-color の定義 |
草案 | outline-color をアニメーション可能として定義 |
| CSS Level 2 (Revision 1) outline-color の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.5 (1.8) In versions previous to 1.5: -moz-outline-color |
8.0 | 7.0 | 1.2 (125) |
invert 値 |
未サポート | Support had been dropped since 3.0 (1.9) バグ 359497: WONTFIX Workaround: Use the value of the element's color property. |
8.0 | 7.0 | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |