ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで4つの枠線の色を異なる色に設定する方法

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

青灯夜游
青灯夜游オリジナル
2021-07-07 15:33:525780ブラウズ

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

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

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

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

CSSで4つの枠線の色を異なる色に設定する方法##実行効果:


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 進数の色

これは最も一般的に使用される色の選択方法です。例: <pre class="brush:js;toolbar:false">color: #ffffff;</pre> これは 16 進数で指定する必要があり、# を追加します。

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

color: #RRGGBB;

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。