非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
Gecko 59 で廃止 (Firefox 59 / Thunderbird 59 / SeaMonkey 2.56)
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。
Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-border-top-colors
プロパティは上辺の境界に色のリストを設定します。
/* 単一の <color> 値 */
-moz-border-top-colors: #f0f0f0;
/* 複数の <color> 値 */
-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
/* グローバル値 */
-moz-border-top-colors: inherit;
-moz-border-top-colors: initial;
-moz-border-top-colors: unset;
要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。
初期値 | none |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
以下の場合は適用されません。
border-style
がdashed
またはdotted
である場合- 表で
border-collapse: collapse
の場合
構文
値
ホワイトスペースで区切られた色の値のリストを受け付けます。
- <color>
- 境界の上辺におけるピクセルの線の色を指定します。
transparent
も有効です。利用可能な単位は<color>
値を参照してください。 - none
- 既定値で、色が描かれないか、指定されていれば
border-color
が使用されます。
形式文法
<color>+ | nonewhere
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
例
<div id="example">Example</div>
#example {
padding: 20px;
background-color: gray;
border: 10px solid black;
-moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
-moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
}
仕様書
このプロパティはどの仕様書でも定義されていません。
ブラウザーの互換性
No compatibility data found. Please contribute data for "css.properties.-moz-border-top-colors" (depth: 1) to the MDN compatibility data repository.