Heim > Web-Frontend > Front-End-Fragen und Antworten > Wie schreibe ich die Farbe einer horizontalen Linie in HTML?

Wie schreibe ich die Farbe einer horizontalen Linie in HTML?

青灯夜游
Freigeben: 2023-02-17 17:11:28
Original
6630 Leute haben es durchsucht

In HTML können Sie das Attribut „border-color“ verwenden, um die Farbe der horizontalen Linie hr festzulegen. Sie müssen nur den Stil „border-color: color value;“ hinzufügen. Mit dem Attribut „border-color“ wird die Rahmenfarbe eines Elements festgelegt. Sie können in einer Deklaration vier Rahmenfarben eines Elements festlegen, d. h. dieses Attribut kann einen bis vier Werte haben.

Wie schreibe ich die Farbe einer horizontalen Linie in HTML?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Das


-Tag definiert Themenänderungen (z. B. Themenwechsel) in HTML-Seiten und wird als horizontale Linie angezeigt. Das


-Element wird verwendet, um Inhalte in einer HTML-Seite zu trennen (oder eine Variation zu definieren).

Der Standard-HR-Tag-Stil:

Wie schreibe ich die Farbe einer horizontalen Linie in HTML?

ist nur eine schwarze Linie, was überhaupt nicht schön ist. Sie können die Border-Color-Eigenschaft von CSS verwenden, um die Farbe festzulegen.

<hr style="border-color: red"/>
Nach dem Login kopieren

Rendering:

Wie schreibe ich die Farbe einer horizontalen Linie in HTML?

Einführung in das Border-Color-Attribut

Das Border-Color-Attribut legt die vier Rahmenfarben eines Elements fest. Diese Eigenschaft kann einen bis vier Werte haben.

Attributwert:

  • Farbe Gibt die Hintergrundfarbe an.

  • transparent gibt an, dass die Farbe des Rahmens transparent sein soll. Dies ist die standardmäßige von CSS3 unterstützte Farbdarstellungsmethode

, ausgedrückt durch den englischen Namen der Farbe. Der englische Name stellt eine Farbe dar, die Darstellung ist jedoch sehr begrenzt und schwer zu merken und abzufragen. wird durch die Farbe von

hex
    dargestellt. Das Prinzip der drei Grundfarben Farbe und Licht kann der Tabelle entnommen werden.
  • wird dargestellt durch
  • rgb (r, g, b). Das Prinzip der drei Grundfarben des Lichts, Rot + Grün + Blau.
  • wird dargestellt durch
  • hsl (Farbton, Sättigung, Helligkeit). Farbton + Sättigung + Helligkeit.
  • wird dargestellt durch
  • rgba (r, g, b, a). Das Prinzip der drei Grundfarben Licht, Rot, Grün, Blau + Transparenz. a ∈ [0, 1], 0 steht für vollständige Transparenz.
  • wird dargestellt durch
  • hsla (Farbton, Sättigung, Helligkeit, Alpha). Farbton, Sättigung, Helligkeit + Transparenz. Alpha ∈ [0, 1], 0 steht für vollständige Transparenz.
  • Beispiel:
    <!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>
    Nach dem Login kopieren
    Webseitenanzeige

    Erläuterung: Der Grund, warum Text am Ende hinzugefügt wird, besteht darin, die Transparenz zu überprüfen.

    (Lernvideo-Sharing: Wie schreibe ich die Farbe einer horizontalen Linie in HTML?CSS-Video-Tutorial

    ,

    Web-Frontend

    )

    Das obige ist der detaillierte Inhalt vonWie schreibe ich die Farbe einer horizontalen Linie in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage