HTMLで横線のhr色を記述する方法-フロントエンドQ&A-php.cn

HTMLで横線のhr色を記述する方法

青灯夜游

リリース： 2023-02-17 17:11:28

オリジナル

6650 人が閲覧しました

HTML では、border-color 属性を使用して水平線 hr の色を設定できます。hr タグに「border-color: color value;」スタイルを追加するだけです。 border-color 属性は、要素の境界線の色を設定するために使用されます。1 つの宣言で要素の 4 つの境界線の色を設定できます。つまり、この属性は 1 ～ 4 つの値を持つことができます。

HTMLで横線のhr色を記述する方法

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

タグは、HTML ページ内のトピックの変更 (トピックの転送など) を定義し、水平線として表示されます。

要素は、HTML ページ内のコンテンツを分離する (またはバリエーションを定義する) ために使用されます。

デフォルトの hr タグスタイル:

HTMLで横線のhr色を記述する方法

は単なる黒い線で、まったく美しくありません。CSS の border-color プロパティを使用できます。色を設定します。

<hr style="border-color: red"/>

ログイン後にコピー

レンダリング:

HTMLで横線のhr色を記述する方法

border-color 属性の概要

border-color 属性の設定要素の 4 つの境界線の色。このプロパティには 1 ～ 4 つの値を指定できます。

属性値:

color 背景色を指定します。
transparent 境界線の色を透明にすることを指定します。これはデフォルトです。

CSS3 でサポートされている色表現方法

は、色の英語名で表されます。英語の名前は色を表しますが、その表現は非常に限られており、覚えたり調べたりするのが困難です。
は hex の色で表されます。色の三原色と光の原理を表で調べることができます。
は rgb (r, g, b) で表されます。光の三原色、赤、緑、青の原理。
はhsl(色相、彩度、明度)で表されます。色相、彩度、明るさ。
は rgba (r, g, b, a) で表されます。光の三原色、赤、緑、青、透明の原理。 a ∈ [0, 1]、0 は完全な透明性を表します。
は hsla (色相、彩度、明度、アルファ) で表されます。色相、彩度、明度、透明度。 alpha ∈ [0, 1]、0 は完全な透明度を表します。

例:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8">
    <title>CSS颜色表示</title>
    <style type="text/css">
      div>div{
        width: 400px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      for (var i = 0; i < 300; i++) {
        document.write("CSS颜色表示");
      }
    </script>
    <div style="position:absolute;top:0px">
      <div style="background-color:gray;">
        background-color:gray
      </div>
      <div style="background-color:#ff4314;">
        background-color:#888
      </div>
      <div style="background-color:#ffff00;">
        background-color:#ffff00
      </div>
      <div style="background-color:rgb(0, 255, 255);">
        background-color:rgb(0, 255, 255)
      </div>
      <div style="background-color:hsl(120, 100%, 50%);">
        background-color:hsl(120, 100%, 50%)
      </div>
      <div style="background-color:rgba(0, 255, 255, 0.5);">
        background-color:rgba(0, 255, 255, 0.5)
      </div>
      <div style="background-color:hsla(120, 100%, 50%, 0.5);">
        background-color:hsla(120, 100%, 50%, 0.5)
      </div>
    </div>
  </body>
</html>

ログイン後にコピー

Web ページ表示

HTMLで横線のhr色を記述する方法