文章摘抄 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;
}
