下载掌阅APP，畅读海量书库
立即打开
虽然现在的CSS已经很强大了，但是要实现一个图3-34所示的样式效果，还是很困难的。
图3-34 特殊的边框围绕文字样式效果
这种文字底部镂空、两侧有边框线的效果，最简单的实现方式一定是使用<fieldset>元素和<legend>元素：
仅使用一行CSS代码即可实现该效果。
如果我们希望<legend>元素里面的文字居中对齐，而不是飘在左上角，也非常简单，像下面这样设置就可以了。
此时效果如图3-35所示。
图3-35 <legend>元素标题文字居中显示效果
我们还可以进一步打开思路，如果只保留上边框，同时将边框样式改为虚线，岂不就实现了一个宽度自适应的分隔线效果。
此时的效果如图3-36所示。
图3-36 <legend>元素轻松实现分隔线效果
上述边框或分隔线效果均可以在线体验，在浏览器中输入地址https://www.htmlapi.cn/3/4-1.html或扫码访问即可。
不过，虽然使用<legend>元素模拟分隔线非常轻松，但是这种做法并不推荐，因为<legend>元素的语义是“标题”，而不是“分隔线”。我更建议大家使用<hr>元素模拟分隔线，详见第5.7.2节。