css 好看的分割线

CSS 中的好看的分割线可以让网页更加美观，这里介绍几种实现分割线的方法。

/*方法一*/.line {
      height: 1px;
      background-color: #ccc;
      margin: 10px 0;
}
/*方法二*/.line {
      height: 2px;
      width: 50%;
      background-color: #ccc;
      margin: 20px auto;
}
/*方法三*/.line {
      height: 6px;
      background: linear-gradient(to right, #ccc 0%, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
      background-size: 50px 6px;
}
    

方法一是最简单的方法，通过设置高度和背景颜色即可实现；方法二使用了宽度限制和居中对齐来制造效果；方法三使用了 CSS 渐变实现了更为复杂的效果。

上述代码中的 .line 可以替换为你想要使用的类名或标签名。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！