Le CSS peut-il être utilisé pour la balise hr en HTML5 ?

En HTML5, la balise hr peut être stylisée avec css. Le style css peut définir comment afficher les éléments HTML. Il vous suffit d'utiliser l'attribut style pour définir l'élément hr avec le style css. ="code de style CSS; "/>" ou "hr{code de style CSS;}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Puis-je utiliser du CSS pour la balise hr en HTML5 ?

Pour faire simple, hr est une ligne de démarcation horizontale (règle horizontale) sur la page html, qui peut séparer visuellement le document en plusieurs parties. Doit être créé dans la page HTML via la balise

---

Jetons ensuite un œil au style de balise hr par défaut :

n'est qu'une ligne noire, ce qui n'est pas beau du tout, encore moins d'utiliser

---

définir le style des heures.

Définir le style RH avec CSS

Comment définir le style RH avec CSS ? En fait, c'est très simple. Vous pouvez définir le style de hr via l'attribut css border et l'attribut css background-image :

1.css définit l'épaisseur (gras) et la couleur de hr

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

2. css définit le style de ligne pointillée de hr (La couleur est bleue)

<hr   style="max-width:90%"/>

3.css définit le style de ligne double de hr

<hr   style="max-width:90%"/>

4.css définit le style tridimensionnel 3D de hr

<hr   style="max-width:90%"/>

5.css définit le style de dégradé du code hr

html :

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

code css :

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));
}

Ce qui précède ne sont que quelques exemples simples. Le style de la balise hr peut également être réalisé via. CSS. Tout le monde peut essayer !

Tutoriel recommandé : "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!