在html中,可以使用border-color屬性來為水平線hr設定顏色,只需要給hr標籤加上「border-color:顏色值;」樣式。 border-color屬性用於為元素設定邊框顏色,可以在一個聲明中設定一個元素的四個邊框顏色,即此屬性可以有一到四個值。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
預設的hr標籤樣式:
就是一條黑線,一點都不美觀,可以使用css的border-color屬性來設定顏色。
<hr style="border-color: red"/>
效果圖:
#border-color屬性介紹
border-color屬性設定一個元素的四個邊框顏色。此屬性可以有一到四個值。
屬性值:
color 指定背景顏色。
transparent 指定邊框的顏色應該是透明的。這是預設
CSS3支援的顏色表示方法
範例:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" ;charset="utf-8"> <title>CSS颜色表示</title> <style type="text/css"> div>div{ width: 400px; height: 40px; } </style> </head> <body> <script type="text/javascript"> for (var i = 0; i < 300; i++) { document.write("CSS颜色表示"); } </script> <div style="position:absolute;top:0px"> <div style="background-color:gray;"> background-color:gray </div> <div style="background-color:#ff4314;"> background-color:#888 </div> <div style="background-color:#ffff00;"> background-color:#ffff00 </div> <div style="background-color:rgb(0, 255, 255);"> background-color:rgb(0, 255, 255) </div> <div style="background-color:hsl(120, 100%, 50%);"> background-color:hsl(120, 100%, 50%) </div> <div style="background-color:rgba(0, 255, 255, 0.5);"> background-color:rgba(0, 255, 255, 0.5) </div> <div style="background-color:hsla(120, 100%, 50%, 0.5);"> background-color:hsla(120, 100%, 50%, 0.5) </div> </div> </body> </html>
網頁展示
#說明:之所以在後面加文字,是為了驗證透明度。
以上是html水平線hr顏色怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章!