Bagaimana saya bisa mengubah ketebalan tag <hr> saya


312

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


Saya ingin ini benar-benar tipis, pengguna seharusnya tidak memperhatikannya di sana kecuali dia secara khusus mencarinya. Pokoknya mencoba ...
Srikar Appalaraju

7
Anda juga dapat mencoba menjadikannya lebih sebagai warna latar belakang sehingga menyatu ...
JustcallmeDrago

4
Karena 1px minimum, Anda harus membuat garis menjadi abu-abu jika Anda ingin itu kurang terlihat.
Gert Grenander

2
@MovieYoda: Dimensi bisa menjadi subpiksel, tetapi rendering akan dibulatkan ke piksel terdekat. Ini seperti mengharapkan nilai integer menjadi 1.23784 ... Tidak mungkin. Anda bisa mengaturnya ke nilai seperti ini tetapi akan dibulatkan ke bilangan bulat terdekat. Secara teoritis Anda bisa membuat lebar dibulatkan menjadi 1/3 piksel pada LCD karena spesifik teknologi, tapi saya ragu browser benar-benar melakukan hal itu. Dimensi subpiksel yang tersisa tidak boleh berwarna apa pun karena hanya terkait dengan salah satu fosfor RGB.
Robert Koritnik

15
Bukan setengah piksel, setengah px. Pertanyaannya tidak sepenuhnya konyol. reddit.com/r/shittyprogramming/comments/20zyea/…
Luke Rehmann

Jawaban:


524

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


10
mengapa Anda membuat border:none? Alasan apapun? Apakah perbatasan juga menambah ketebalan?
Srikar Appalaraju

11
Yap, kami ingin menggunakan warna latar belakang untuk menampilkan garis untuk konsistensi. FF menggunakan perbatasan untuk membuat <hr> tetapi tidak. Ini akan membuat keduanya sama.
Gregg B

2
Ya, saya selalu menemukan tag <hr> lintas-peramban menjengkelkan. Sangat menyenangkan untuk membuat mereka berperilaku baik.
Gregg B

Atau, jika Anda hanya perlu sekali saja, Anda dapat melakukannya sesuai dengan<hr style="border: none; height:1px; color:#333; background-color:#333;">;
Jesse Chisholm

1
Berapa umur IE untuk fallback color?
trysis

53

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.


8

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


Variasi 3, WARNA sesuai keinginan:

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

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


Saya akan senang, jika tolong seseorang akan mengujinya untuk Chrome dan IE. Dua variasi pertama cukup rumit, esp. Variasi ke-2, yang outputnya terlihat pertama BLACK 1px.
Muscaria

Saya suka solusi ini karena tidak meng-hard-code info warna apa pun, yang dapat berguna untuk kompatibilitas dengan mode gelap. Bekerja dengan baik di Chrome.
tresf

6

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;
}

Saya dapat melihat bahwa di Chrome terbaru, ketebalannya berubah di sepanjang halaman. Yang lebih buruk, itu bisa hilang jika Anda memperkecil :(
Pavel Alexeev

5

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;"


1

Saya menambahkan opacity ke baris, jadi sepertinya lebih tipis:

<hr style="opacity: 0.25">

0

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>.


0

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>


-4

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>

Heheheh :) Belum pernah melihat ini sebelumnya :)
Prakash Raman
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.