Schimbarea culorii unui element hr

Cred că ar trebui să utilizați de frontieră-de culoare "în loc de" culoare, dacă intenția dumneavoastră este de a schimba culoarea de linie produsă de

Deși, s-a precizat în comentarii că, dacă modificați dimensiunea de linia de frontieră va mai fi la fel de mare ca tine specificate în stiluri, și linia va fi umplut cu culoarea implicită (care nu este un efect dorit de cele mai multe ori). Deci se pare ca in acest caz ar trebui de asemenea să specificați background-color (ca @Ibu sugerat în răspunsul său).

HTML 5 Sabloane proiect în stil implicită specifies următoarea regulă:

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

Un articol intitulat "12 Pic-Cunoscut CSS Fapte", a publicat recent de SitePoint, se menționează că <hr> poate seta sa border-color mamă's culoare dacă specificați hr { border-color: moșteni }.

• border-color funcționează în Chrome și Safari.
• background-color funcționează în Firefox și Opera.
• "culoare" funcționează în IE7+.

Cred că acest lucru poate fi util. acest lucru a fost simplu selector CSS.

hr { background-color: red; height: 1px; border: 0; }

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

Acest mod vă permite să modificați înălțimea, dacă este necesar. Noroc. Sursa: Cum Să Stil HR cu CSS

Testat în Firefox, Opera, Internet Explorer, Chrome și Safari.

hr {
    border-top: 1px solid red;
}

[Vezi Vioara](http://jsfiddle.net/HPSjU/).

Numai de frontieră-top cu culoare este suficient pentru a face linia în diferite culori.

hr {
    border-top: 1px solid #ccc;
}

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

Acest lucru va menține Regula Orizontală 1px gros, în timp ce, de asemenea, schimbarea culorii de ea

hr
{
color: #f00;
background-color: #f00;
înălțime: 5px;
}

Cred că aceasta este abordarea cea mai eficace:

<hr style="border-top: 1px solid #ccc; background: transparent;">

Sau, dacă preferați faci pe toate hr elemente scrie pe tine CSS:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

După ce a citit toate raspunsurile de aici, și de a vedea complexitatea descris, l-am setat la o mică diversiune pentru experimentarea cu HR. Și, concluzia este că puteți arunca de cele mai multe monkeypatched CSS-ai scris, citit acest mic [apret](https://jsfiddle.net/RedDevil/ds20fjo6/) și de a folosi doar aceste două linii pure CSS:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

Care este TOATE aveți nevoie pentru stilul tău de Ore.

• Funcționează cross-browser-ul, cross-dispozitiv, eco-sistem de operare, cross-engleză-canal, cross-vârstele.
• Nu "cred că acest lucru va lucra...", "aveți nevoie pentru a păstra Opera/IE în minte..." etc.
• nu există extra css - nu "înălțime", "lățime", background-color, culoare, etc. implicate.

Doar antiglonț colorate Ore. L's care simpluTM.

Bonus: Pentru a da ÎR unele înălțimea "H", doar setați border-width " ca " H/2.

hr
{
  background-color: #123455;
}

fundalul este unul care ar trebui să încercați pentru a schimba

De asemenea, puteți lucra cu frontierele de culoare. nu sunt sigur cred ca sunt crossbrowser probleme cu asta. tu ar trebui să testeze în differrent browsere

dacă u folosi clasa css atunci acesta va fi luat de toate 'hr' tag-uri , dar dacă u nevoie pentru un anumit 'hr' folosește codul de mai jos am.e, css

<hr style="color:#99CC99" />

daca's nu funcționează în chrome incearca codul de mai jos:

<hr color="red" />

Tu ar trebui să stabilească de frontieră-lățimea de la 0; funcționează bine în Firefox și Chrome.

hr { clar: ambele; culoare: rosu; background-color: red; height: 1px; border-width: 0; }

Unele browsere utilizați "culoare" atribut și unii folosesc background-color atribut. Pentru a fi în siguranță:

hr{
    color: #color;
    background-color: #color;
}

I'm de testare pe IE, Firefox și Chrome Mai 2015 și acest lucru funcționează cel mai bine cu versiunile curente. Centrele de resurse umane și face 70% larg:

hr.lumina { lățime:70%; margin:0 auto; border:0px nici unul alb; de frontieră-top:1px solid lightgrey; }

L's simplu și preferata mea.

<hr style="background-color: #dd3333" />

Din moment ce eu nu't au reputația de a comenta, am sa va dau aici câteva idei.

dacă doriți un css înălțime variabilă, scoate toate granițele și dă o culoare de fundal.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

dacă doriți pur și simplu un stil care știi că va lucra (exemplu: pentru a înlocui un chenar în o ::înainte de element pentru majoritatea clienților de e-mail sau <ie8)

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

În ambele moduri, dacă setați o lățime, va avea mereu's de dimensiune.

Nu este nevoie să configurați display:block; "" pentru asta.

Pentru a fi în siguranță, puteți amesteca ambele, 'că unele browsere pot obține confuz cu înălțime:0px;`:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

Cu această metodă, puteți fi sigur că acesta va avea cel puțin 2px în înălțime.

L's o linie mai mult, dar siguranța este în siguranță.

Aceasta este metoda ar trebui să utilizați pentru a fi compatibil cu aproape orice.

Amintiți-vă: Gmail detectează doar inline css și unii clienți de e-mail nu poate sprijini medii sau frontiere. Dacă nu reușește, veți avea în continuare o 1px linia. Mai bine decât nimic.

În cel mai rău caz, puteți încerca să adăugați culoare:albastru;`.

În cel mai rău dintre cele mai grave cazuri, puteți încerca să utilizați un <font color="albastru"></font> tag-ul și pune-ți prețioase <h/> tag înăuntru. Acesta va moșteni tag culoare.

Cu această metodă, nu VA vreau să fac astfel de prognoze: <hr width="50" align="stânga"/>.

Exemplu:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <hr width="50" align="left"/>
    </span>

Aici este un link pentru tine de a verifica: [http://jsfiddle.net/sna2D/][1]

Puteți da <hr noshade> tag-ul și du-te la fișier css și se adaugă :

hr { de frontieră-top:0; culoare: #123455; }

Folosind culori de font pentru a modifica normele orizontale ce le face mai flexibile și ușor de utilizat.

Culoare proprietate e't moștenit în mod implicit, deci, următoarele trebuie să fie adăugat pentru a hr's a permit culoare moștenire:

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

Ai putea face acest lucru :

hr { border: 1px solid roșu; }