Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

outline-color

概要

CSS の outline-color プロパティは、要素のアウトラインの色を設定します。アウトラインとは、要素を囲むようにボーダー境界の外側に描かれる線で、要素を目立たせます。

初期値ブラウザが invert をサポートしていればinvert、それ以外では currentColor
適用対象全要素
継承不可
メディアvisual, interactive
計算値キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparentrgb(0,0,0) にマップされます
アニメーションの可否可。 の値として補完しますcolor
正規順序形式文法で定義される一意のあいまいでない順序

構文

<color> | invert

where
<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 | WindowText

where
<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
基本サポート ? ? ? ? ?

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Sebastianz, fscholz, ethertank, sosleepy
 最終更新者: Sebastianz,