CSS border 0.5px 虚线

border 0.5px 存在很多兼容问题，很多设备都会默认展示 1px 如果是实线可以用 background 和 height 1px 然后transform scaleY(0.5) 去实现。
但是虚线怎么办呢。

.ticket-line::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 200%;border: 1px dashed rgba(179, 179, 179, 1);transform: scale(0.5);transform-origin: top left;pointer-events: none;
}

这种实现方式，会发现虚线之间的间隔也变小了。不满足需求 使用 background-image渐变 可以实现。

      height: 1px; /* 虚线的高度 */width: 100%;background-size: 8px 1px; /* 间隔8px */background-image: linear-gradient(to right, rgba(179, 179, 179, 1) 0%, rgba(179, 179, 179, 1) 50%, transparent 50%);background-repeat: repeat;transform: scaleY(0.5);