[分享]css3文字两边带横线

CSS3中有一项非常实用的特性是可以为文字添加两边带横线的效果，非常适合用于标题、重要提示等需要强调的文字部分。h1 { bordertop: 1px solid 000; borderbottom:...

CSS3中有一项非常实用的特性是可以为文字添加两边带横线的效果，非常适合用于标题、重要提示等需要强调的文字部分。

h1 {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 2.2em;
    line-height: 1.5em;
    padding: 20px 0;
    margin: 0;
} 

上面的代码演示了如何为h1标签添加两根横线，以及设置标题的字母间距、大小、行高、居中等效果。我们可以根据实际需要调整这些参数，比如可以将横线宽度增加或减少，颜色改为其他颜色，调整文字大小和行高等等。

需要注意的是，如果我们要为同一段文字添加两边横线的效果，需要将文字包裹在带有样式的容器中，比如下面的代码：

<p class="text-box">此文本将会变成两端带有横线的效果</p>

.text-box {
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5em;
    padding: 10px 0;
    margin: 0;
} 

如上代码所示，我们为p标签添加了一个class为text-box的样式，实现了两边带有横线的效果。需要注意的是，在这种情况下，我们需要设置p标签的padding和margin为0，以防止影响到横线的位置。

总的来说，CSS3中的文字两边带横线特性能够为我们提供非常方便的设计手段，可以用于梳理段落、强调标题、突出关键字等等，非常值得广泛使用。