跨浏览器的hr的CSS控制

最新推荐文章于 2025-10-08 12:03:28 发布

原创最新推荐文章于 2025-10-08 12:03:28 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #css #border #class

本文介绍如何通过CSS实现网页中hr元素的颜色、边框统一控制，并提供丰富的个性化线条设计方法，包括不同宽度、颜色和样式的效果展示。

由于各浏览器对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" />