CSSで4つの枠線の色を異なる色に設定する方法

CSS では、border-top-color、border-bottom-color、border-left-color、および border-right-color プロパティを使用して、上境界線、下境界線、左境界線、と右の境界線の色をそれぞれ指定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

#CSS は異なる色の 4 つの境界線を設定します

##実行効果:

説明:

#border-top-color プロパティは、上部の境界線の色を設定できます
border-bottom-color プロパティは下の境界線の色を設定できます
border-left-color プロパティは左の境界線の色を設定できます
border-right - color 属性は右の境界線の色を設定できます

#CSS color

css で、色の値は、色の名前、パーセント、数値、および 16 進数値を使用する 4 つの記述方法があります。

1) 色の名前を使用する

現在、名前付きの色は約 184 色ありますが、これらはさまざまなブラウザで実際にサポートされており、CSS 仕様として機能します。おすすめの色名は以下の16色です。

#表 1: CSS 仕様で推奨される色の名前

Color##ブラックピュアブラック#シルバー##ブルーライトブルーダークグリーン#ライトグリーン##インディゴアクア天蓝#クリムゾン##大红#ディープパープルフクシアマゼンタブラウンイエローシェルホワイト Web ページで色名を使用することは、特に大規模な使用の場合には推奨されません。これは、一部の色名が使用されないことを避けるためです。ブラウザによって解析されるか、ブラウザごとに色が異なって解釈されます。 2) パーセンテージを使用します

color: rgb(100%, 100%, 100%);

rgb(0%, 0%, 0%)3) 数値を使用します

Name

Name Name	カラー	名前	カラー
ライトグレー	ネイビー	ダークブルー			#グリーン
ライム		##ティール			#マルーン
レッド	#紫				##オリーブ
yellow	明黄	グレー	ダークグレー		ホワイト
		これは最も一般的な方法です。例:	このステートメントは、赤、青、緑の三原色をすべて最大値に設定し、その組み合わせを白で表示します。代わりに、	を黒に設定できます。 3 つのパーセンテージ値が等しい場合、グレーが表示され、同様にパーセンテージ値が大きい方の原色が優先されます。

数値の範囲は 0 ～ 255 です。例:

color: rgb(255, 255, 255);

上記のステートメントは白で表示されます。逆に

rgb(0, 0, 0)

に設定すると黒が表示されます。 3つの値が等しい場合はグレー表示となり、同様に値が大きいほどどの原色の割合が多くなるかということになります。

4) 16 進数の色

これは最も一般的に使用される色の選択方法です。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">color: #ffffff;</pre><div class="contentsignin">ログイン後にコピー</div></div> これは 16 進数で指定する必要があり、# を追加します。

前面にある色の記号。上記のステートメントでは白が表示されますが、逆に #000000 を黒に設定することもできます。これは RGB で表されます:

color: #RRGGBB;

の範囲は 0 から 255 です。実際には 10 進数で 255 です。 FF、16 進カラー値は、そのような 16 進値の 3 つのグループに等しく、順番に接続すると、赤、青、緑の 3 原色に等しくなります。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで4つの枠線の色を異なる色に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。