Ändern der Farbe eines hr-Elements

Ich möchte die Farbe meines "hr"-Tags mit CSS ändern. Der Code, den ich unten versucht habe, scheint nicht zu funktionieren:

hr {
    color: #123455;
}
Uwe Keim
Bearbeitete Frage 28. Dezember 2018 в 1:22
Programmierung
html css
17. Juni 2011 в 6:15
19 Aufrufe
Lösung

Ich denke, Sie sollten border-color anstelle von color verwenden, wenn Sie die Farbe der vom <hr>-Tag erzeugten Linie ändern wollen.

Allerdings wurde in den Kommentaren darauf hingewiesen, dass, wenn Sie die Größe Ihrer Linie ändern, der Rahmen immer noch so breit ist, wie Sie es in den Stilen angegeben haben, und die Linie mit der Standardfarbe gefüllt wird (was in den meisten Fällen nicht erwünscht ist). Es sieht also so aus, als ob man in diesem Fall auch Hintergrundfarbe angeben müsste (wie @Ibu in seiner Antwort vorgeschlagen hat).

HTML 5 Boilerplate Projekt in seinem Standard-Stylesheet spezifiziert die folgende Regel:

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

Ein Artikel mit dem Titel "12 Little-Known CSS Facts", der kürzlich von SitePoint veröffentlicht wurde, erwähnt, dass <hr> seine border-color auf die color seiner Eltern setzen kann, wenn Sie hr { border-color: inherit } angeben.

Anton Strogonoff
Bearbeitete Antwort 13. April 2019 в 10:32
Kommentare (5)
 
hr
{
color: #f00;
background-color: #f00;
Höhe: 5px;
}
Kommentare (0)
 
hr
{
  background-color: #123455;
}

der Hintergrund ist derjenige, den man versuchen sollte zu ändern

Sie können auch mit der Farbe des Rahmens arbeiten. Ich bin mir nicht sicher, ob es dabei Probleme mit Crossbrowsern gibt. Sie sollten es in verschiedenen Browsern testen

Kommentare (5)