Maison >interface Web >tutoriel CSS >Comment changer la couleur d'une règle horizontale HTML () à l'aide de CSS ?

Comment changer la couleur d'une règle horizontale HTML () à l'aide de CSS ?

DDD
DDDoriginal
2024-12-03 11:16:10797parcourir

How Do I Change the Color of an HTML Horizontal Rule () Using CSS?

Style de la règle horizontale

Bien que l'extrait de code inclus ci-dessous tente initialement de changer la couleur d'une balise

<hr> à l'aide de CSS, il prouve échec :
<hr>
hr {
  color: #123455;
}

Solution

Pour modifier la couleur de ligne de l'élément

<hr>, pensez à utiliser la propriété border-color au lieu de color :
hr {
  border-color: #123455;
}

Cependant, notez que si la taille de la ligne change, la largeur de la bordure reste telle que spécifiée dans le style, tandis que la ligne elle-même revient à la couleur par défaut. Par conséquent, il est conseillé de spécifier également background-color.

La feuille de style par défaut HTML 5 Boilerplate inclut la règle suivante :

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

De plus, un article de SitePoint souligne que

<hr> peut hériter sa couleur de bordure à partir de son élément parent en utilisant la propriété CSS border-color : hériter.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn