Wie stelle ich den HR-Stil in CSS ein? CSS tagt mehrere Stile (Grafik und Text)

Beim Verschönern einer HTML-Webseite ist es unbedingt erforderlich, das hr-Tag zum Ändern der Seite zu verwenden. Der standardmäßige hr-Tag-Stil spielt jedoch keine gute Rolle beim Ändern der Seite. Verwenden Sie CSS-Stile, um einige Verschönerungsvorgänge am HR-Tag durchzuführen. Wie gestaltet man also das HR-Tag in CSS? In diesem Kapitel werden Ihnen verschiedene Stile zum Festlegen von HR-Tags in CSS vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Was bedeutet hr?

Einfach ausgedrückt ist hr eine horizontale Trennlinie (horizontale Linie) auf der HTML-Seite, die das Dokument visuell in verschiedene Teile unterteilen kann. Muss in der HTML-Seite über das

---

-Tag erstellt werden.

Dann werfen wir einen Blick auf den Standard-HR-Tag-Stil:

ist nur eine schwarze Linie, was überhaupt nicht schön ist, geschweige denn mit < ;hr> Jetzt, da die Seite schön ist, müssen Sie CSS verwenden, um den Stil von hr festzulegen.

2. HR-Stil mit CSS festlegen

Wie legen wir den HR-Stil mit CSS fest? Tatsächlich ist es sehr einfach, den Stil von hr über CSS-Rahmenattribut und CSS-Hintergrundbildattribut festzulegen:

1.css legt die Dicke fest von hr (fett) Mit der Farbe

<hr style="border: 5px solid red;"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->

2.css legt den gepunkteten Linienstil von hr fest (Farbe ist blau)

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>

3.css legt den zweizeiligen Stil von hr fest

<hr style="height:3px;border:none;border-top:3px double red;"/>

4.css legt den dreidimensionalen 3D-Stil von hr fest

<hr style=" height:5px;border:none;border-top:5px ridge green;"/><!--3D 垄状-->
<hr style=" height:10px;border:none;border-top:10px groove skyblue;"/><!--3D 凹槽-->

5.css legt den Verlaufsstil von hr fest

HTML-Code:

<hr class="style-one"/>
<br/>
<hr class="style-two"/>

CSS-Code:

hr.style-one {/*透明渐变水平线*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background: #333;
    background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}

Das Obige sind nur Beispiele. Nach einigen einfachen Beispielen kann der Stil des hr-Tags auch durch CSS erreicht werden. Jeder kann es versuchen!

Das obige ist der detaillierte Inhalt vonWie stelle ich den HR-Stil in CSS ein? CSS

---

tagt mehrere Stile (Grafik und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!