css 写一个虚线 虚线高度 宽度可以自定义

在CSS中，创建自定义的虚线效果可以使用`:before`和`:after`伪元素以及背景线状渐变。下面是一个基本的例子，它允许你自定义虚线的高度和宽度：

.custom-dashed-line {
  position: relative;
  display: inline-block; /* 或者display:block, 根据需要选择 */
}

.custom-dashed-line::before,
.custom-dashed-line::after {
  content: "";
  position: absolute;
  width: var(--custom-width, 1px); /* 使用变量自定义宽度，默认为1像素 */
  height: var(--custom-height, 2px); /* 使用变量自定义高度，默认为2像素 */
  background: repeating-linear-gradient(
    to right, /* 纵向虚线方向 */
    transparent calc(100% - var(--dashed-gap)), /* 虚线间隔前透明部分 */
    transparent 0, /* 全部透明 */
    currentColor calc(var(--custom-width) + var(--dashed-gap)), /* 虚线宽度加上间隔 */
    currentColor calc(var(--custom-width) * 2 + var(--dashed-gap)) /* 总宽度两次加上间隔 */
  );
  top: 50%;
  left: 0;
  transform: translateX(0) translateY(-50%);
}

/* 变量示例 */
:root {
  --custom-width: 2px;
  --custom-height: 3px;
  --dashed-gap: 1px;
}

在这个代码中，`--custom-width`和`--custom-height`是可定制的变量，`--dashed-gap`是虚线之间的间隙。通过更改这些变量，你可以轻松调整虚线的尺寸。