文章摘抄?http://www.w3cplus.com/css/css-hr
?
<hr>標簽是html4用來制作水平線的。如果你在網頁制作中使用了<hr />標簽來制作水平分隔線，你知道在沒有樣式設置的情況下，他是很難看的。<hr/>在各瀏覽器的顯示常常是 100%的寬度，2px的高度,3D邊框風格渲染 。默認情況是不太好看，或者也不符合你的網頁風格，但是你給<hr/>標簽設置了樣式，這樣他看起來就不會那么難看，同時也更能適合你的頁面風格。但是，你千萬要小心，因為有一些瀏覽器對<hr/>渲染出來的風格是不一樣的。大家先來看一朋友在其頁中運用的<hr/>在Firefox 和ＩＥ下的效果：
從上圖中很明顯得知，你在樣式中設置<hr/>的邊框樣式，在各瀏覽器下顯示是不一樣的
hr
{
border-top
:
1
px solid
#ddd
;
}
此時在IE下顯示是1px的邊框線；但在Firefox,Opera等瀏覽器下顯示的卻是2px的邊框，如果你把邊值從新設置：
hr
{
border
:
none;
}
此時效果又不一樣，在Firefox,Opera等瀏覽器下不會顯示任何邊框，可是在IE下卻照常有一條1px的細線顯示。
上面是<hr/>線寬在瀏覽器下顯示不一樣，其實他的顏色設置也是不一樣的： <hr/>在IE下是通過前景色“color”來控制他的顏色；而在Firefox和Opera等現代瀏覽器下只有背景色“background-color”才能控制他的顏色。換句話說，只有前景色和背景色設置一樣時，他們才會顯示一樣的顏色。
hr
{
color
:
red;
}
/*這樣設置只會在IE下有效果*/
hr
{
background-color
:
red;
}
/*這樣設置只有Firefox和Opera等現代瀏覽器下有效果*/
所以為了達到各瀏覽器下顯示效果一樣，你需要對<hr/>同時設置前景色和背景色，并且他們的值要設置成相同的值：
hr
{
color
:
red;
background-color
:
red;
}
這樣下來，在Opera下還是無法工作，因為在給線條定色之前，Opera還需要給他定義一個高度：
hr
{
color
:
red;
background-color
:
red;
height
:
1
px;
border
:
none;
}
這樣下來，你的<hr/>在各瀏覽器渲染將在達到一致的風格，不過在下建議最好在加上兩個屬性，這要在IE6下運行將更穩定：
hr
{
color
:
red;
background-color
:
red;
height
:
1
px;
line-height
:
1
px;
font-size
:
0
;
border
:
none;
}
現在解決了<hr/>制線線條的粗細和顏色問題，最后他還有一個對齊問題，比如說你想讓50％寬度的線條，左對齊或者右對齊，你肯定會想到使用float屬性，進行左浮動或者右浮動，如：
hr
{
color
:
red;
background-color
:
red;
height
:
1
px;
line-height
:
1
px;
font-size
:
0
;
border
:
none;
width
:
50
%;
float
:
right;
}
這樣下來在IE下是不能正常運行的，為了能讓他在IE下正常工作，需要把代碼改成：
hr
{
color
:
red;
background-color
:
red;
height
:
1
px;
line-height
:
1
px;
font-size
:
0
;
border
:
none;
width
:
50
%;
float
:
right;
display
:
block;
/*改變hr的顯示風格*/
text-align
:
right;
/*右對齊*/
}
上面介紹了如何讓<hr/>標簽制作的水平分隔線能在所有瀏覽器下渲染成一樣的風格。那么下面我們使用上面的知識和CSS3的漸變效果，來制作一些效果好看的分隔線。
首先來看第一個實例，制作普通的水平分隔線，代碼如下：
HTML Markup
<
hr
class
=
"normal"
/>
CSS Code:
hr
.normal
{
background
:
#ddd
;
/*改變現代瀏覽器下線條色*/
color
:
#ddd
;
/*改變ＩＥ瀏覽器下線條色，最好和Background-color設置一樣的色*/
clear
:
both;
/*可以用來清除浮動*/
float
:
none;
/*取消浮動，可以不設置*/
width
:
100
%;
/*顯式定義寬度*/
height
:
1
px;
/*改變部分瀏覽器下的默認高度*/
line-height
:
1
px;
/*保證ＩＥ下高度效果一致，不留白色空白區*/
font-size
:
0
;
/*設置為0，以確保IE6下不留空白區*/
border
:
none
0
;
/*取消默認邊框，以背景和高度代替邊框效果*/
margin
:
0
0
1.4
em;
}
上面是制作普通水平分隔線的效果，如果你在你的制作中經常使用hr來制作水平線，你可以將其寫入你的base.css樣式中，下面我們接著來看兩種CSS3制作的效果：兩邊淡化效果以及浮雕效果。
?
<hr>常規化狀態下樣式：
hr
{
background
:
#ddd
;
/*改變現代瀏覽器下線條色*/
color
:
#ddd
;
/*改變ＩＥ瀏覽器下線條色，最好和Background-color設置一樣的色*/
clear
:
both;
/*可以用來清除浮動*/
float
:
none;
/*取消浮動，可以不設置*/
width
:
100
%;
/*顯式定義寬度*/
height
:
1
px;
/*改變部分瀏覽器下的默認高度*/
line-height
:
1
px;
/*保證ＩＥ下高度效果一致，不留白色空白區*/
font-size
:
0
;
/*設置為0，以確保IE6下不留空白區*/
border
:
none
0
;
/*取消默認邊框，以背景和高度代替邊框效果*/
margin
:
0
0
1.4
em;
}
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
