跨浏览器的hr的CSS控制

    由于各浏览器对hr的呈现不一致，主要是颜色和边框不统一。可以通过下面的方法实现统一的控制。

<style>
.hr30 {
height:30px;
color:green;
background-color:green;
border:none;
}
</style>
<hr class="hr30">

    效果如下：

---

    如果需要更丰富的效果，则将hr的上边作为一种可编辑的线条，进行个性化的设置。

<style type="text/css"> 
.hr0{ border:none;height:1px;border-top:1px dashed #0066CC;}
.hr1{ border:none;height:1px;border-top:1px solid #555555;} 
.hr2{ border:none;height:3px;border-top:3px double red;} 
.hr3{ border:none;height:5px;border-top:5px ridge green;} 
.hr4{ border:none;height:10px;border-top:10px groove skyblue;} 
</style> 
<hr class="hr0" /> 
<hr class="hr1" /> 
<hr class="hr2" /> 
<hr class="hr3" /> 
<hr class="hr4" /> 

---

---

---

---

---