-moz-border-top-colors

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

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
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

以下の場合は適用されません。

  1. border-style が dashed または dotted である場合
  2. 表で border-collapse: collapse の場合

構文

値

ホワイトスペースで区切られた色の値のリストを受け付けます。

<color>
境界の上辺におけるピクセルの線の色を指定します。 transparent も有効です。利用可能な単位は <color> 値を参照してください。
none
既定値で、色が描かれないか、指定されていれば border-color が使用されます。

形式文法




例



<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;
}







仕様書



このプロパティはどの仕様書でも定義されていません。



ブラウザーの互換性





Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
-moz-border-top-colors 
非推奨非標準
Chrome
                未対応
              
              なしEdge
                未対応
              
              なしFirefox
              未対応
            1 — 59
補足 

              未対応
            1 — 59
補足 
補足 In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).
補足 In Firefox 60, the property was removed completely (See bug 1429723).
IE
                未対応
              
              なしOpera
                未対応
              
              なしSafari
                未対応
              
              なしWebView Android
                未対応
              
              なしChrome Android
                未対応
              
              なしFirefox Android
              未対応
            4 — 59
補足 

              未対応
            4 — 59
補足 
補足 In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).
補足 In Firefox 60, the property was removed completely (See bug 1429723).
Opera Android
                未対応
              
              なしSafari iOS
                未対応
              
              なしSamsung Internet Android
                未対応
              
              なし
凡例

                
                 未対応
                  
                
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。



関連情報



 
関連トピック