Làm cách nào để thay đổi độ dày của thẻ <hr>

Tôi muốn thay đổi độ dày của quy tắc ngang ( <hr>) trong CSS. Tôi biết nó có thể được thực hiện trong HTML như vậy -

<hr size="10">

Nhưng tôi nghe rằng điều này không được chấp nhận như đã đề cập trên MDN ở đây . Trong CSS tôi đã thử sử dụng height:1pxnhưng nó không thay đổi độ dày. Tôi muốn <hr>dòng 0.5pxdày.

Tôi đang sử dụng Firefox 3.6.11 trên Ubuntu

Để thống nhất loại bỏ bất kỳ đường viền và sử dụng chiều cao cho <hr>độ dày. Thêm màu nền sẽ tạo kiểu cho bạn <hr>với chiều cao và màu được chỉ định.

Trong biểu định kiểu của bạn:

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

Hoặc nội tuyến như bạn có nó:

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

Giải thích dài hơn ở đây

Hiển thị pixel phụ trong trình duyệt

Kết xuất pixel phụ là khó khăn. Bạn thực sự không thể mong đợi một màn hình hiển thị một dòng mỏng hơn một pixel. Nhưng nó có thể cung cấp kích thước pixel phụ. Tùy thuộc vào trình duyệt mà họ kết xuất chúng khác nhau. Kiểm tra bài viết trên blog của John Resig về nó.

Về cơ bản nếu màn hình của bạn là màn hình LCD và bạn đang vẽ các đường thẳng đứng, bạn có thể dễ dàng vẽ một đường 1/3 pixel. Nếu nền của bạn là màu trắng, hãy cho màu của bạn #f0f. Để mắt, dòng này sẽ rộng 1/3 pixel. Mặc dù nó sẽ có một số màu, nhưng nếu bạn phóng to màn hình, bạn sẽ thấy rằng chỉ một đoạn của toàn bộ pixel (bao gồm RGB) sẽ tối. Đây là khá nhiều kỹ thuật được sử dụng cho gợi ý loại tốt, ví dụ như ClearType .

Nhưng các đường ngang chỉ có thể là một pixel cao đầy đủ. Đó là giới hạn công nghệ của màn hình LCD. CRT thậm chí còn phức tạp hơn với các photpho hình tam giác của chúng (trừ khi chúng là loại lưới tản nhiệt khẩu độ, tức là Sony Trinitron) nhưng đó là một câu chuyện khác.

Về cơ bản cung cấp một kích thước pixel phụ và hy vọng nó hiển thị theo cách đó giống như mong đợi một biến số nguyên để lưu trữ một số 1.2034759349. Nếu bạn hiểu điều này là không thể, bạn nên hiểu rằng màn hình không thể hiển thị kích thước pixel phụ.

Đa phong cách trình duyệt an toàn

Nhưng cách quy tắc ngang hòa trộn thường được thực hiện bằng cách sử dụng màu sắc. Vì vậy, nếu nền của bạn là màu trắng ( #fff), bạn luôn có thể làm cho HR rất nhẹ. Thích #eee.

Kiểu an toàn của trình duyệt chéo cho quy tắc ngang rất nhẹ sẽ là:

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

Và sử dụng tệp CSS thay vì kiểu trong dòng. Họ cung cấp một định nghĩa trung tâm cho toàn bộ trang web không chỉ là một yếu tố cụ thể. Nó làm cho khả năng bảo trì tốt hơn nhiều.

Tôi đang tìm cách ngắn nhất để vẽ một dòng 1px, vì toàn bộ tải CSS tách rời không phải là giải pháp nhanh nhất hoặc ngắn nhất.

Lên đến HTML5, WAS một cách ngắn hơn cho 1px hr: <hr noshade> nhưng .. Thuộc tính noshade của <hr> không được hỗ trợ trong HTML5. Sử dụng CSS thay thế. (cũng không phải các thành phần khác được sử dụng trước đây, như kích thước, chiều rộng, căn chỉnh ) ...

Bây giờ, cái này khá khó, nhưng hoạt động tốt nếu cần 1px giờ đơn giản nhất:

Biến thể 1, giờ đen: (giải pháp tốt nhất cho màu đen)

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

Đầu ra: FF, Opera - đen / Safari - xám đậm

Biến thể 2, GRAY hr (ngắn nhất!):

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

Đầu ra: Opera - xám đậm / FF - xám / Safari - xám nhạt

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

Đầu ra: Opera / FF / Safari: 1px đỏ.

Tôi sẽ khuyên bạn nên đặt HRchính nó ở 0pxmức cao và sử dụng đường viền của nó để hiển thị thay thế. Tôi đã nhận thấy rằng khi bạn phóng to và thu nhỏ (ctrl + bánh xe chuột), độ dày của HRchính nó sẽ thay đổi, trong khi khi bạn đặt đường viền, nó luôn giữ nguyên:

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

thuộc tính height đã không được dùng trong html 5. Điều tôi sẽ làm là tạo một đường viền xung quanh hr và tăng độ dày của đường viền như sau: hr style = "Border: solid 2px black;"

Tôi đã thêm độ mờ cho dòng, vì vậy nó có vẻ mỏng hơn:

<hr style="opacity: 0.25">

Tôi tin rằng thành tích tốt nhất cho <hr>thẻ kiểu dáng là như sau:

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

Và đối với mã HTML, chỉ cần thêm : <hr>.

Đây là giải pháp cho đường màu đen 1 pixel không có viền hoặc lề

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

• Đã thử nghiệm trong Google Chrome

Tôi nghĩ rằng tôi sẽ thêm điều này bởi vì các câu trả lời khác không bao gồm : margin:0px;.

• Bản giới thiệu

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>

Tôi đề nghị sử dụng xây dựng như

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

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