Ændring af farven på et hr-element

Jeg ønsker at ændre farven på mit hr-tag ved hjælp af CSS. Den kode, jeg har prøvet nedenfor, ser ikke ud til at virke:

hr {
    color: #123455;
}
Uwe Keim
Redigeret spørgsmål 2018ør december 2018 в 1:22
Programmering
html css
2011ør juni 2011 в 6:15
17 visninger
Løsning

Jeg synes, at du skal bruge border-color i stedet for color, hvis du ønsker at ændre farven på den linje, der produceres af <hr>-tagget.

Selv om det er blevet påpeget i kommentarer, at hvis du ændrer størrelsen af din linje, vil grænsen stadig være så bred som du har angivet i styles, og linjen vil blive fyldt med standardfarven (hvilket ikke er en ønsket effekt de fleste gange). Så det ser ud til, at du i dette tilfælde også skal angive background-color (som @Ibu foreslog i sit svar).

HTML 5 Boilerplate projektet i sit standard stylesheet specificerer følgende regel:

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

En artikel med titlen "12 Little-Known CSS Facts", der blev offentliggjort for nylig af SitePoint, nævner, at <hr> kan indstille sin border-color til sin overordnede color, hvis du angiver hr { border-color: inherit }.

Anton Strogonoff
Redigeret svar 2019ør april 2019 в 10:32
Kommentarer (5)
 
hr
{
color: #f00;
background-color: #f00;
højde: 5px;
}
Kommentarer (0)
 
hr
{
  background-color: #123455;
}

det er baggrunden, du skal forsøge at ændre

Du kan også arbejde med farven på rammerne. jeg er ikke sikker på at der er problemer med dette på tværs af browsere. du bør teste det i forskellige browsere.

Kommentarer (5)