<hr> etiketimin kalınlığını nasıl değiştirebilirim

CSS'deki yatay kuralımın ( <hr>) kalınlığını değiştirmek istiyorum . HTML gibi yapılabilir biliyorum -

<hr size="10">

Ama bu olduğunu duymak kaldırılmış üzerinde belirtildiği gibi burada MDN'yi . CSS'de kullanmayı denedim height:1pxama kalınlığı değiştirmiyor. <hr>Çizginin 0.5pxkalın olmasını istiyorum .

Ubuntu'da Firefox 3.6.11 kullanıyorum

Tutarlılık için kenarlıkları kaldırın ve <hr>kalınlık için yüksekliği kullanın . Bir arka plan rengi eklediğinizde, <hr>belirtilen yükseklik ve renkle stilize edilir.

Stil sayfanızda:

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

Ya da sahip olduğunuz gibi satır içi:

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

Burada daha uzun açıklama

Tarayıcılarda alt piksel oluşturma

Alt piksel oluşturma zor. Bir monitörün pikselden daha ince bir çizgi oluşturmasını bekleyemezsiniz. Ancak alt piksel boyutları sağlamak mümkündür. Tarayıcıya bağlı olarak bunları farklı şekilde işlerler. Bu konuda John Resig'in blog gönderisini kontrol edin .

Temel olarak monitörünüz bir LCD ise ve dikey çizgiler çiziyorsanız, kolayca 1/3 piksel çizgi çizebilirsiniz. Arka planınız beyazsa, çizgi renginizi verin #f0f. Göze göre bu çizgi 1/3 piksel genişliğinde olacaktır. Bazı renkler olsa da, monitörü büyütürseniz, tüm pikselin (RGB'den oluşan) yalnızca bir bölümünün karanlık olacağını görürsünüz. Bu, ClearType gibi ince tip ipucu için kullanılan hemen hemen bir tekniktir .

Ancak yatay çizgiler yalnızca tam piksel yüksekliğinde olabilir. Bu, LCD monitörlerin teknoloji sınırlamasıdır. CRT'ler üçgen fosforları ile daha da karmaşıktı ( diyafram ızgarası tipi yani Sony Trinitron olmadıkları sürece ), ancak bu farklı bir hikaye.

Temel olarak bir alt piksel boyutu sağlamak ve bu şekilde oluşturulmasını beklemek, bir tamsayı değişkeninin bir dizi 1.2034759349 saklanmasını beklemekle aynıdır. Bunun imkansız olduğunu anlarsanız, monitörlerin alt piksel boyutlarını oluşturamadığını anlamalısınız.

Çapraz tarayıcı güvenli tarzı

Ancak yatay kuralların karıştığı yol genellikle renkler kullanılarak yapılır. Yani arka planınız örneğin beyazsa ( #fff) her zaman HR çok aydınlık yapabilirsiniz. Gibi #eee.

Çok hafif yatay kural için tarayıcılar arası güvenli stil:

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

Ve satır içi stiller yerine bir CSS dosyası kullanın. Yalnızca belirli bir öğe için değil, tüm site için merkezi bir tanım sağlarlar. Sürdürülebilirliği çok daha iyi hale getirir.

Ayrılmış CSS'nin tüm yükü en hızlı veya en kısa çözüm olmadığından, 1 piksellik bir çizgi çizmenin en kısa yolunu arıyordum.

HTML5'e kadar, WAS 1px saat daha kısa bir yol: <hr noshade> ama .. HTML5'te <hr> noshade özelliği desteklenmez. Bunun yerine CSS kullanın. (daha önce boyut, genişlik, hizalama olarak kullanılan diğer özellikler ) ...

Şimdi, bu oldukça zor, ama en basit 1 piksel saat gerekirse iyi çalışır:

Varyasyon 1, BLACK saat: (siyah için en iyi çözüm)

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

Çıktı: FF, Opera - siyah / Safari - koyu gri

Varyasyon 2, GRİ sa (en kısa!):

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

Çıktı: Opera - koyu gri / FF - gri / Safari - açık gri

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

Çıktı: Opera / FF / Safari: 1 piksel kırmızı.

HRKendini 0pxyüksek olarak ayarlamanızı ve onun yerine görünür olmasını sağlamak için sınırını kullanmanızı tavsiye ederim . Yakınlaştırıp uzaklaştırdığınızda (ctrl + fare tekerleği) HRkendisinin kalınlığının değiştiğini, kenarlığı ayarladığınızda her zaman aynı kaldığını fark ettim :

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

height özniteliği html 5'te kullanımdan kaldırılmıştır. Yapacağım şey, saatin etrafında bir kenarlık oluşturmak ve kenarlığın kalınlığını şu şekilde arttırmaktır: hr style = "border: solid 2px black;"

Çizgiye opaklık ekledim, bu yüzden daha ince görünüyor:

<hr style="opacity: 0.25">

Stil <hr>etiketi için en iyi başarının aşağıdaki gibi olduğuna inanıyorum :

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

Ve HTML kodu için sadece ekleyin: <hr>.

İşte kenarlık veya kenar boşluğu olmayan 1 piksel siyah çizgi için bir çözüm

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

• Google Chrome'da test edildi

Diğer cevaplar içermiyordu çünkü bu eklersiniz düşündüm: margin:0px;.

• gösteri

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>

İnşaat gibi kullanmanızı öneririm

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

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