ฉันจะเปลี่ยนความหนาของแท็ก <hr> ของฉันได้อย่างไร

ฉันต้องการเปลี่ยนความหนาของกฎแนวนอนของฉัน ( <hr>) ใน CSS ฉันรู้ว่ามันสามารถทำได้ในรูปแบบ HTML เช่นนั้น -

<hr size="10">

แต่ผมได้ยินว่านี้จะเลิกเป็นที่กล่าวถึงในMDN ที่นี่ ใน CSS ฉันพยายามใช้height:1pxแต่ไม่เปลี่ยนความหนา ฉันต้องการ<hr>เส้น0.5pxหนา

ฉันใช้ Firefox 3.6.11 บน Ubuntu

เพื่อความสอดคล้องลบเส้นขอบใด ๆ และใช้ความสูงสำหรับ<hr>ความหนา การเพิ่มสีพื้นหลังจะทำให้สไตล์ของคุณ<hr>มีความสูงและสีที่ระบุ

ในสไตล์ชีทของคุณ:

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

หรืออินไลน์ตามที่คุณมี:

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

คำอธิบายอีกต่อไปที่นี่

การแสดงผลพิกเซลย่อยในเบราว์เซอร์

การแสดงผลพิกเซลย่อยนั้นยุ่งยาก คุณไม่สามารถคาดหวังได้ว่าจอภาพจะแสดงเส้นที่บางกว่าพิกเซล แต่เป็นไปได้ที่จะให้มิติย่อยพิกเซล ขึ้นอยู่กับเบราว์เซอร์ที่ทำให้สิ่งเหล่านี้แตกต่างกัน ตรวจสอบโพสต์บล็อกของ John Resig เกี่ยวกับเรื่องนี้

โดยทั่วไปหากจอภาพของคุณเป็น LCD และคุณวาดเส้นแนวตั้งคุณสามารถวาดเส้นขนาด 1/3 พิกเซลได้อย่างง่ายดาย หากพื้นหลังของคุณเป็นสีขาวให้สีของ#f0fเส้น สายนี้จะมีความกว้างถึง 1/3 ของดวงตา แม้ว่าจะมีบางสีถ้าคุณขยายจอภาพคุณจะเห็นว่าเพียงส่วนเดียวของพิกเซลทั้งหมด (ประกอบด้วย RGB) จะมืด นี้สวยมากเทคนิคที่ใช้สำหรับประเภทปรับเค้าคือClearType

แต่เส้นแนวนอนต้องมีความสูงเต็มพิกเซลเท่านั้น นั่นเป็นข้อ จำกัด ทางเทคโนโลยีของจอภาพ LCD CRT นั้นซับซ้อนยิ่งขึ้นด้วยฟอสเฟอร์รูปสามเหลี่ยม (ยกเว้นว่าเป็นกระจังหน้าแบบรูรับแสง Sony Trinitron) แต่นั่นก็เป็นเรื่องที่แตกต่างออกไป

โดยทั่วไปจะให้มิติย่อยพิกเซลและคาดหวังว่ามันจะแสดงผลในลักษณะเดียวกันกับการคาดหวังว่าตัวแปรจำนวนเต็มเพื่อจัดเก็บจำนวน 1.2034759349 หากคุณเข้าใจว่าเป็นไปไม่ได้คุณควรเข้าใจว่าจอภาพไม่สามารถแสดงมิติย่อยพิกเซลได้

สไตล์เบราว์เซอร์ที่ปลอดภัย

แต่วิธีการที่กฎในแนวนอนที่ผสมผสานมักจะใช้สี ดังนั้นหากพื้นหลังของคุณเป็นสีขาวเช่น ( #fff) คุณสามารถทำให้แสงสว่างHR มาก กด#eeeไลค์

สไตล์ของเบราว์เซอร์ที่ปลอดภัยสำหรับกฎแนวนอนที่เบามากจะเป็น

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

และใช้ไฟล์ CSS แทนรูปแบบในบรรทัด พวกเขาให้คำจำกัดความที่สำคัญสำหรับไซต์ทั้งหมดไม่ใช่แค่องค์ประกอบเฉพาะ มันทำให้การบำรุงรักษาดีขึ้นมาก

ฉันกำลังมองหาวิธีที่สั้นที่สุดในการวาดเส้น 1px เนื่องจากโหลดทั้งหมดของ CSS ที่แยกออกจากกันไม่ใช่วิธีที่เร็วที่สุดหรือสั้นที่สุด

สูงสุด HTML5 วิธี WAS เป็นวิธีที่สั้นกว่าสำหรับ 1px ชม.: <hr noshade> แต่ .. คุณลักษณะ noshade ของ <hr> ไม่รองรับใน HTML5 ใช้ CSS แทน (หรือคุณสมบัติอื่น ๆ ที่ใช้ก่อนหน้านี้ไม่ว่าจะเป็นขนาดความกว้างการจัดตำแหน่ง ) ...

ตอนนี้อันนี้ค่อนข้างยุ่งยาก แต่ทำงานได้ดีถ้าต้องการ 1px ชั่วโมงที่ง่ายที่สุด:

Variation 1, BLACK hr: (ทางออกที่ดีที่สุดสำหรับสีดำ)

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

เอาท์พุต: FF, Opera - ดำ / Safari - เทาเข้ม

รูปแบบที่ 2, สีเทาชั่วโมง (สั้นที่สุด!):

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

เอาต์พุต: Opera - สีเทาเข้ม / FF - สีเทา / Safari - สีเทาอ่อน

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

ผลลัพธ์: Opera / FF / Safari: 1px red

ฉันขอแนะนำให้ตั้งค่าHRตัวเองให้0pxสูงและใช้เส้นขอบเพื่อให้มองเห็นได้แทน ฉันสังเกตเห็นว่าเมื่อคุณซูมเข้าและออก (ctrl + mouse wheel) ความหนาของHRตัวมันเองจะเปลี่ยนไปในขณะที่เมื่อคุณตั้งค่าขอบมันจะยังคงเหมือนเดิม:

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

แอตทริบิวต์ height ถูกเลิกใช้ใน html 5. สิ่งที่ฉันจะทำคือสร้างเส้นขอบรอบ ๆ ชั่วโมงและเพิ่มความหนาของเส้นขอบเช่น: hr style = "border: solid 2px black;"

ฉันเพิ่มความทึบของเส้นดังนั้นมันจึงบางลง:

<hr style="opacity: 0.25">

ฉันเชื่อว่าความสำเร็จที่ดีที่สุดสำหรับ<hr>แท็กการจัดแต่งทรงผมมีดังนี้:

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

และสำหรับรหัส HTML <hr>เพียงแค่เพิ่ม:

นี่คือวิธีแก้ปัญหาสำหรับเส้นสีดำ 1 พิกเซลที่ไม่มีขอบหรือขอบ

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

• ผ่านการทดสอบใน Google Chrome

ฉันคิดว่าฉันจะเพิ่มนี้เพราะคำตอบอื่น ๆ margin:0px;ไม่รวมถึง:

• การสาธิต

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>

ฉันแนะนำให้ใช้สิ่งก่อสร้างเช่น

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

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