本网站只能被运行在支持JavaScript脚本的环境中

hr元素的16个设计示例

hr元素在HTML页面中创建一条水平线,用于在视觉上将页面分隔成各个部分。本文介绍关于如何美化该元素的12个设计示例。由于部分示例使用CSS 3样式,在早期版本的浏览器中可能不能呈现预期效果。另外,虚线及点线在不同的浏览器中可能呈现不同的视觉效果,使用时请注意这一点。

共同样式代码

首先介绍12个设计示例中均使用到的hr元素的共同样式代码,如下所示。

hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

1 实线

视觉效果


CSS样式代码

hr {
    border-top: 1px solid #bbb;
}

2 双重线

视觉效果


CSS样式代码

hr {
    border-top: 3px double #bbb;
}

3 虚线

视觉效果


CSS样式代码

hr {
    border-top: 1px dashed #bbb;
}

4 点线

视觉效果


CSS样式代码

hr {
    border-top: 1px dotted #bbb;
}

5 背景色线-虚线

在大多数情况下hr元素的背景色为单色,可以使用background-color样式属性结合呈现两种背景色。

视觉效果


CSS样式代码

hr {
    background-color: #fff;
    border-top: 2px dashed #bbb;
}

6 背景色线-点线

视觉效果


CSS样式代码

hr {
    background-color: #fff;
    border-top: 2px dotted #bbb;
}

7 立体线-实线

接下来介绍如何使1px的水平线呈现立体效果。

视觉效果


CSS样式代码

hr {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #fff;
}

8 立体线-双重线

视觉效果


CSS样式代码

hr {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #fff;
}
hr:after {
    content: '';
    display: block;
    margin-top: 2px;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #fff;
}

9 立体线-虚线

视觉效果


CSS样式代码

hr {
    border-top: 1px dashed #bbb;
    border-bottom: 1px dashed #fff;
}

10 立体线-点线

视觉效果


CSS样式代码

hr {
    border-top: 1px dotted #bbb;
    border-bottom: 1px dotted #fff;
}

11 背景图像 #1

接下来介绍如何绘制具有背景图像的水平线。

视觉效果


CSS样式代码

hr {
    height: 4px;
    background: url(line01.png) repeat-x 0 0;
}

12 背景图像 #2

视觉效果


CSS样式代码

hr {
    height: 4px;
    background: url(line02.png) repeat-x 0 0;
}

13 渐变效果

接下来介绍如何绘制中央色浓,两边色淡的具有渐变效果水平线。

视觉效果


CSS样式代码

hr {
    height: 1px;
    background: #bbb;
    background-image: -webkit-linear-gradient(left, #eee, #777, #eee);
    background-image: -moz-linear-gradient(left, #eee, #777, #eee);
    background-image: -ms-linear-gradient(left, #eee, #777, #eee);
    background-image: -o-linear-gradient(left, #eee, #777, #eee);
}

14 其他 #1

接下来介绍如何结合使用:after伪元素与content样式属性绘制包含符号或文字的水平线。

视觉效果


CSS样式代码

hr {
    border-top: 4px double #bbb;
    text-align: center;
}
hr:after {
    content: '\002665';
    position: relative;
    top: -15px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #bbb;
    font-size: 18px;
}

15 其他 #2

本例与上例相类似,将border-style样式属性值设置为dashed,在水平线中间放置剪刀图形,以呈现剪线效果。

视觉效果


CSS样式代码

hr {
    border-top: 1px dashed #bbb;
}
hr:after {
    content: '\002702';
    position: relative;
    top: -12px;
    left: 40px;
    padding: 0 3px;
    background: #f0f0f0;
    color: #bbb;
    font-size: 18px;
}

16 其他 #3

本例与“14 其他 #1”所示示例相类似,使用transform变形功能将中央符号旋转60度。

视觉效果


CSS样式代码

hr{
    border-top: 1px solid #bbb;
    text-align: center;
}
hr:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -20px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #bbb;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}