css实现两边向中间渐变

1. 效果图

2. css代码

虚线

width: 100%; //线的长度
height: 1px; //线的高度
border-top: 1px dashed #0a1c24; //用于实现虚线效果，注意重点来了：最后的色值属性保持和页面背景色一致才是虚线效果
background: linear-gradient(
  to right,
  #0a2e38 0%,
  #37959a 50%,
  #05252f 100%
); //画渐变线
background-origin: border-box;  //图像从边框（包括border区域）开始裁剪（默认）， 表示裁剪超出边框区的内容

实线【更加简单，去掉实现虚线部分即可】

width: 100%; //线的长度
height: 1px; //线的高度
background: linear-gradient(
  to right,
  #0a2e38 0%,
  #37959a 50%,
  #05252f 100%
); //画渐变线

3. 补充另一种实现虚线的方式

width: 100px;
height: 2px;
background-image: linear-gradient(
  90deg,
  transparent 0,
  #37959a 50%,
  transparent 100%
);
-webkit-mask-image: linear-gradient(
  90deg,
  rgba(0, 0, 0, 1) 45%,
  transparent 0%
);//实现虚线
-webkit-mask-size: 6px 1.5px; //第一个参数控制虚线点的长度，第二个参数虚线点的高度【与容器设置的height也有关系】
-webkit-mask-repeat: repeat-x;