ホームページ > 記事 > ウェブフロントエンド > CSSで枠線の色のグラデーションコードを実装する方法を詳しく解説
CSSで枠線の色のグラデーションコードを実装する方法を詳しく解説
- 伊谢尔伦オリジナル
- 2017-07-19 11:06:1910786ブラウズ
CSS では、境界線の幅が n ピクセルの場合、n 個の異なる色を設定できます。
コードでは、幅 7px の実線を定義できます: border: 7px Solid #C8C8C8; (ここで設定した色は気にしないでください。後続のコードで新しく設定された色で上書きされます) Firefox の場合)
次のコードに示すように、枠線の 4 つの枠線のグラデーション カラーを同時に設定すると:
<html>
<head>
<style>
p{
height: 100px;
width: 100px;
border: 7px solid red;
border-color: red green yellow black;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
HTML ファイルを実行すると、次のような効果が得られます。
コード会議 設定した色は、時計回りに自動的に上、右、下、左に割り当てられます。 3 色だけを設定した場合、結果は明らかで、上下 3 方向の境界線に直接割り当てられます。したがって、このルールに従って境界線の色を設定したくないことをコードに知らせるには、各方向の境界線のグラデーション色を個別に設定する必要があります。 コードは次のとおりです。
<html>
<head>
<style>
p{
height: 100px;
width: 100px;
background: #E8F5FC;
border: 7px solid red;
-moz-border-top-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
-moz-border-right-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
-moz-border-bottom-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
-moz-border-left-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
}
</style>
</head>
<body>
<p></p>
</body>
</html>実行結果は次のとおりです。
なお、ボーダーのボーダーカラー設定は外側から内側に向かって設定されているため、最初のカラーコードが一番外側の色、最後のカラーコードが一番内側の色となります。
以上がCSSで枠線の色のグラデーションコードを実装する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。