HTML5中实现横线分隔有五种方法：一、语义化标签；二、CSS边框属性；三、伪元素::before/::after；四、SVG矢量绘制；五、linear-gradient背景渐变模拟。
。
2、将 width 设为 100% 可实现响应式延展，viewBox 保证线条比例恒定。
3、如需渐变横线，可用 定义 并赋给 stroke。
五、使用CSS渐变背景模拟横线
借助 background-image 的 linear-gradient 函数，可在任意元素上通过背景方式“画出”横线，兼容性强且易于复用。
1、为一个空
设置高度为 0，但赋予 padding-bottom 或 margin-bottom 形成占位空间。
2、添加样式：background: linear-gradient(to right, transparent 50%, #666 50%, transparent 50%); background-size: 2px 2px; background-repeat: repeat-x;
3、调整 background-size 中第一个值可控制横线粗细，第二个值控制垂直位置精度。
微信扫一扫 
支付宝扫一扫 
