Bagaimana saya bisa mengubah ketebalan tag <hr> saya

Saya ingin mengubah ketebalan aturan horizontal saya ( <hr>) di CSS. Saya tahu ini bisa dilakukan dalam HTML seperti ini -

<hr size="10">

Tetapi saya mendengar bahwa ini sudah usang sebagaimana disebutkan di MDN di sini . Dalam CSS saya mencoba menggunakan height:1pxtetapi tidak mengubah ketebalan. Saya ingin <hr>garis menjadi 0.5pxtebal.

Saya menggunakan Firefox 3.6.11 di Ubuntu

Untuk konsistensi menghapus batas dan gunakan ketinggian untuk <hr>ketebalan. Menambahkan warna latar akan gaya Anda <hr>dengan tinggi dan warna yang ditentukan.

Di stylesheet Anda:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Atau sebaris seperti yang Anda miliki:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Penjelasan yang lebih panjang di sini

Render sub-pixel di browser

Render sub-pixel rumit. Anda tidak dapat benar-benar mengharapkan monitor membuat garis tipis kurang dari satu piksel. Tetapi dimungkinkan untuk memberikan dimensi sub-piksel. Bergantung pada browser, mereka membuat ini berbeda. Lihat posting blog John Resig tentang hal ini.

Pada dasarnya jika monitor Anda adalah LCD dan Anda menggambar garis vertikal, Anda dapat dengan mudah menggambar garis 1/3 piksel. Jika latar belakang Anda putih, beri warna garis Anda #f0f. Untuk mata garis ini akan menjadi 1/3 dari lebar piksel. Meskipun akan berwarna, jika Anda memperbesar monitor, Anda akan melihat bahwa hanya satu segmen dari seluruh piksel (terdiri dari RGB) akan menjadi gelap. Ini cukup banyak teknik yang digunakan untuk mengisyaratkan tipe halus yaitu ClearType .

Tapi garis horizontal hanya bisa setinggi pixel penuh. Itulah keterbatasan teknologi monitor LCD. CRT bahkan lebih rumit dengan fosfor segitiga mereka (kecuali mereka adalah tipe grille aperture yaitu. Sony Trinitron) tapi itu cerita yang berbeda.

Pada dasarnya memberikan dimensi sub-piksel dan mengharapkannya untuk merender dengan cara yang sama dengan mengharapkan variabel integer untuk menyimpan sejumlah 1,2034759349. Jika Anda memahami ini tidak mungkin, Anda harus memahami bahwa monitor tidak dapat membuat dimensi sub-pixel.

Gaya lintas browser yang aman

Namun cara aturan horisontal yang menyatu biasanya dilakukan dengan menggunakan warna. Jadi, jika latar belakang Anda misalnya putih ( #fff) Anda selalu dapat membuat cahaya Anda HR sangat . Seperti #eee.

Gaya aman lintas peramban untuk aturan horizontal yang sangat ringan adalah:

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

Dan gunakan file CSS alih-alih gaya in-line. Mereka memberikan definisi pusat untuk seluruh situs bukan hanya elemen tertentu. Itu membuat pemeliharaan lebih baik.

Saya mencari cara terpendek untuk menggambar garis 1px, karena seluruh beban CSS yang dipisahkan bukan solusi tercepat atau terpendek.

Hingga HTML5, WAS cara yang lebih pendek untuk 1px jam: <hr noshade> but .. Atribut noshade dari <hr> tidak didukung dalam HTML5. Gunakan CSS sebagai gantinya. (Atau attibutes lain yang digunakan sebelumnya, seperti ukuran, lebar, sejajar ) ...

Sekarang, ini cukup rumit, tetapi bekerja dengan baik jika paling sederhana diperlukan 1px jam:

Variasi 1, BLACK hr: (solusi terbaik untuk hitam)

<hr style="border-bottom: 0px">

Output: FF, Opera - hitam / Safari - abu-abu gelap

Variasi 2, ABU-ABU jam (terpendek!):

<hr style="border-top: 0px">

Output: Opera - abu-abu gelap / FF - abu-abu / Safari - abu-abu terang

<hr style="border: none; border-bottom: 1px solid red;">

Output: Opera / FF / Safari: 1px merah.

Saya akan merekomendasikan pengaturan HRitu sendiri menjadi 0pxtinggi dan menggunakan perbatasannya agar terlihat. Saya perhatikan bahwa ketika Anda memperbesar dan memperkecil (ctrl + roda mouse) ketebalannya HRsendiri berubah, sementara ketika Anda mengatur batasnya selalu tetap sama:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

atribut ketinggian telah ditinggalkan dalam html 5. Apa yang akan saya lakukan adalah membuat perbatasan di sekitar jam dan meningkatkan ketebalan perbatasan seperti: hr style = "border: solid 2px black;"

Saya menambahkan opacity ke baris, jadi sepertinya lebih tipis:

<hr style="opacity: 0.25">

Saya percaya pencapaian terbaik untuk <hr>tag styling adalah sebagai berikut:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

Dan untuk kode HTML hanya menambahkan: <hr>.

Inilah solusi untuk garis hitam 1 piksel tanpa batas atau margin

hr {background-color:black; border:none; height:1px; margin:0px;}

• Diuji di Google Chrome

Saya pikir saya akan menambahkan ini karena jawaban yang lain tidak termasuk: margin:0px;.

• Demo

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Saya sarankan untuk menggunakan konstruksi seperti

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>