CSS3 ボーダー マルチカラー Border-color プロパティの使用例

Border-colorは、マルチカラーボーダー属性のために特別に用意されています。次に、CSS3マルチカラーボーダーBorder-colorの使用方法を紹介します。 CSS3 ボーダー マルチカラー Border-color は、マルチカラーボーダー用に特別に用意されたプロパティです。 CSS2 にも border color 属性がありますが、CSS3 の border color 属性はどのような素晴らしい機能を持っているのでしょうか。CSS3 のボーダーのマルチカラー Border-color を紹介しましょう。

1. Border-color の構文

コードは次のとおりです:

要素セレクター { -moz-border-top-colors: color color color; moz-border-right-colors:color color color; /*右ボーダー*/
-moz-border-
bottom
-colors: カラー color color; /*下ボーダー*/ -moz-border-left-colors: color color color; /*left border*/ }

2. 境界線の色の互換性

3. 境界線の色の例
CSS コード:
コードは次のとおりです:

p { 幅:100px;

高さ

:50px;ボーダー:10px 透明;マージン:20px; /*上の境界線*/ -moz-border-top-colors: #bfe6f8 #b0e3fa #9fdefa #89d6f9 #73cff9 #5dcafc #3ac1fe #20b7fb #05b1ff;
/*下の境界線*/
-moz-border-bottom-colors: #ded7fc #c9bdfd #b7a6fe #a18bfc #8c72fb #7657fe #633ffe #4e25fe #3c0ffd; */
-moz-border-right-colors: #dbfdd5 #c4feba #adfe9f #96fe84 #89ff76 #72fa5b #57fd3c #43fe24 #25fd01;
/*左ボーダー*/
-moz-border-left-colors: # ffc9c9 #ffb0b0 #ff9696 #fd7f7f #fd6969 #fd5050 #fd3838 #fd1b1b #fe0101;
}

HTML コード:

コードは次のとおりです:

蒙龍駅

プレビュー効果:

以上がCSS3 ボーダー マルチカラー Border-color プロパティの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。