Perubahan warna dari suatu elemen hr

Saya pikir anda harus menggunakan border-color, bukan warna, jika tujuan anda adalah untuk mengubah warna garis yang dihasilkan oleh <hr> tag.

Meskipun, hal itu telah ditunjukkan dalam komentar itu, jika anda mengubah ukuran baris, perbatasan masih akan selebar yang anda tentukan dalam gaya, dan baris yang akan diisi dengan warna default (yang bukan efek yang diinginkan sebagian besar waktu). Jadi sepertinya dalam hal ini anda juga akan perlu untuk menentukan background-color (seperti @Ibu disarankan dalam jawaban-nya).

HTML 5 Boilerplate proyek di default stylesheet specifies aturan berikut:

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

Artikel berjudul "12 Sedikit Diketahui CSS Fakta", yang diterbitkan baru-baru ini oleh SitePoint, menyebutkan bahwa <hr> dapat mengatur border-color untuk para orang tua's warna jika anda menentukan hr { border-color: mewarisi }.

• border-color bekerja di Chrome dan Safari.
• background-color bekerja di Firefox dan Opera.
• warna bekerja di IE7+.

Saya pikir ini dapat berguna. ini adalah simple CSS selector.

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

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

Melakukannya dengan cara ini memungkinkan anda untuk mengubah ketinggian jika diperlukan. Good luck. Sumber: Cara Untuk HR Style dengan CSS

Diuji di Firefox, Opera, Internet Explorer, Chrome dan Safari.

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

[Lihat Biola](http://jsfiddle.net/HPSjU/).

Hanya border-top dengan warna sudah cukup untuk membuat garis dalam warna yang berbeda.

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

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

Ini akan menjaga Horizontal Rule 1px tebal sementara juga mengubah warna itu

hr
{
color: #f00;
background-color: #f00;
tinggi: 5px;
}

Saya percaya ini adalah pendekatan yang paling efektif:

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

Atau jika anda lebih suka melakukan hal itu pada semua hr unsur-unsur menulis ini pada CSS anda:

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

Setelah membaca semua jawaban di sini, dan melihat kompleksitas dijelaskan, saya set pada pancingan kecil untuk bereksperimen dengan HR. Dan, kesimpulannya adalah bahwa anda dapat membuang sebagian besar monkeypatched CSS anda menulis, membaca ini kecil [primer](https://jsfiddle.net/RedDevil/ds20fjo6/) dan hanya menggunakan dua jalur murni CSS:

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

Yang SEMUA anda perlu untuk gaya anda HRs.

• Bekerja cross-browser, cross-perangkat, cross-os, cross-inggris-channel, lintas usia.
• Tidak ada "saya pikir ini akan bekerja...", "anda perlu untuk menjaga Safari/IE dalam pikiran...", dll.
• tidak ada tambahan css - tidak ada tinggi, width, background-color, warna, dll. terlibat.

Hanya antipeluru berwarna-warni Jam. It's yang sederhanaTM.

Bonus: Untuk memberikan beberapa HR tinggi H, hanya mengatur border-width sebagai H/2.

hr
{
  background-color: #123455;
}

latar belakang adalah salah satu yang anda harus mencoba untuk mengubah

Anda juga dapat bekerja dengan batas warna. saya tidak yakin saya pikir ada crossbrowser masalah dengan ini. anda harus mengujinya di browser berbeda

jika anda menggunakan class css maka akan diambil oleh semua 'hr' kategori , tetapi jika anda ingin untuk tertentu 'hr' gunakan kode di bawah ini saya.e, inline css

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

jika itu's tidak bekerja di chrome mencoba kode di bawah ini:

<hr color="red" />

Anda harus mengatur border-width 0; Ia bekerja dengan baik di Firefox dan Chrome.

hr { clear: both; warna: merah; background-color: red; height: 1px; border-width: 0; }

Beberapa browser menggunakan warna atribut dan beberapa menggunakan background-color atribut. Aman:

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

I'm pengujian pada IE, Firefox dan Chrome Mei 2015, dan ini bekerja terbaik dengan versi saat ini. Itu pusat HR dan membuatnya 70% luas:

hr.cahaya { width:70%; margin:0 auto; border:0px none warna putih; border-top:1px solid lightgrey; }

It's sederhana dan favorit saya.

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

Karena aku don't memiliki reputasi untuk komentar, saya akan berikan di sini beberapa ide-ide.

jika anda ingin css variabel tinggi, melepas semua perbatasan dan memberikan warna latar belakang.

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

jika anda ingin hanya gaya yang anda tahu itu akan bekerja (contoh: untuk mengganti perbatasan di ::sebelum elemen untuk kebanyakan klien email atau <ie8)

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

Dalam cara kedua, jika anda mengatur lebar, itu akan selalu memiliki itu's ukuran.

Tidak perlu untuk mengatur display:block; ini.

Untuk menjadi benar-benar aman, anda dapat mencampur kedua, 'menyebabkan beberapa browser bisa mendapatkan bingung dengan height:0px;:

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

Dengan metode ini anda dapat yakin bahwa itu akan memiliki setidaknya 2px di ketinggian.

It's garis yang lebih banyak, tetapi keselamatan adalah keselamatan.

Ini adalah metode yang harus anda gunakan untuk menjadi kompatibel dengan hampir segala sesuatu.

Ingat: Gmail hanya mendeteksi inline css dan beberapa klien email mungkin tidak mendukung latar belakang atau perbatasan. Jika salah satu gagal, anda masih akan memiliki 1px baris. Baik dari apa-apa.

Dalam kasus terburuk, anda dapat mencoba untuk menambahkan color:blue;.

Di terburuk dari kasus-kasus terburuk, anda dapat mencoba untuk menggunakan <font color="blue"></font> tag dan masukan berharga anda <hr/> tag di dalamnya. Itu akan mewarisi <font></font> tag warna.

Dengan metode ini, anda AKAN ingin melakukan seperti ini: <hr width="50" align="kiri"/>.

Contoh:

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

Berikut ini adalah link bagi anda untuk memeriksa: [http://jsfiddle.net/sna2D/][1]

Anda dapat memberikan <hr noshade> tag dan pergi ke file css dan tambahkan :

hr { border-top:0; warna: #123455; }

Menggunakan warna font untuk memodifikasi horizontal aturan-aturan yang membuat mereka lebih fleksibel dan mudah untuk digunakan.

Warna tidak't diwariskan secara default, jadi berikut ini perlu ditambahkan untuk hr's untuk memungkinkan warisan warna:

/* 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">

Anda bisa lakukan ini :

hr { border: 1px solid red; }