css - 有没有办法自定义 border 为 dashed 时的虚线间距？

Question

CSS 的 border: 1px dashed 样式太难看了，虚线非常的宽，dotted 也是一样，间距太窄。

有没有办法控制虚线或者点的长度或者间距呢？

Answer 1

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

——MDN

囧, it seems there is no solution. But you can use pictures as borders.

Answer 2

No way.

But SVG lines can set the spacing.

path {
    stroke-dasharray: 4;
    stroke-dashoffset: 22;
}

Answer 3

If you must do this, using a background image is also an option. Just cut a small piece to repeat, and the compatibility is very good. But if it is a vertical border, it is a little more troublesome.