如何定制化 dotted 的距离

原来是使用

CSS
Copy
.xxx {
    border-bottom: 1px dotted rgb(100, 106, 115);
}

来搞的，UI反馈太密了，要求按设计稿走

方案如下

CSS
Copy
.border-pop-underline-container {
  background-image: linear-gradient(to right, black 33%, rgba(255, 255, 255, 0) 33% 100%);
  background-position: bottom;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}

background-image 中使用 linear-gradient to right, black 33%, rgba(255, 255, 255, 0) 33% 100% 含义为方向是朝右，33%之前是黑色，33% - 100% 之间是白色

3px 是每个单位的宽度

MDN 上可以找到依据

CSS
Copy
body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}