Endre fargen på et hr-element

Jeg ønsker å endre fargen på hr-taggen min ved hjelp av CSS. Koden jeg har prøvd nedenfor ser ikke ut til å fungere:

hr {
    color: #123455;
}
Løsning

Jeg synes du bør bruke border-color i stedet for color, hvis du ønsker å endre fargen på linjen som produseres av `


-taggen.

Selv om det har blitt påpekt i kommentarfeltet at hvis du endrer størrelsen på linjen, vil rammen fortsatt være like bred som du har angitt i stilene, og linjen vil fylles med standardfargen (noe som oftest ikke er en ønsket effekt). Så det ser ut til at du i dette tilfellet også må spesifisere background-color (som @Ibu foreslo i sitt svar).

HTML 5 Boilerplate-prosjektet i sitt standard stilark spesifiserer følgende regel:

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

En artikkel med tittelen "12 Little-Known CSS Facts", nylig publisert av SitePoint, nevner at <hr> kan sette sin border-color til sin overordnede color hvis du spesifiserer hr { border-color: inherit }.

Kommentarer (5)
hr
{
color: #f00;
background-color: #f00;
height: 5px;
}
Kommentarer (0)
hr
{
  background-color: #123455;
}

bakgrunnen er den du bør prøve å endre på

Du kan også jobbe med kantfargen. jeg er ikke sikker, men jeg tror det er problemer med dette på tvers av nettlesere. du bør teste det i forskjellige nettlesere.

Kommentarer (5)