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

Question

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

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

Answer 1

可以的，用渐变

width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;

Answer 2

没有办法。

但SVG线条是可以设置间距的。

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

Answer 3

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

囧，看来没好办法。不过你可以用图片作边框用。

Answer 4

如果一定要这样，使用一下背景图片也是个选择，切一小片repeat就好了，而且兼容性很好。但如果是竖边框的话，就稍微麻烦些。

Answer 5

    // 让 after 的 border 覆盖元素 border 的 n 个 px 的宽度，使其 border 宽度减小 npx
    ::after {
      border: 1px solid #fff; // 主要是这句
      background: transparent;
      
      display: block;
      content: " ";
      height: 100%;
      width: 100%;
      
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

Answer 6

@哔哔肾 “鸭式辨型” 这个有意思，思路开阔。

来个伪类写的分割线

      &:after
        width 10px
        height calc(100% - .1rem)
        background-image linear-gradient(to bottom, #ccc 0%, #ccc 50%, transparent 50%)
        background-size 1px 8px
        background-repeat repeat-y
        position absolute
        top 0.25em
        left -0.42rem
        content ''

父级给两个属性

      position relative
      margin .42rem

这个实现出来的，在iOS与android上基本是一致的效果，质量较高的还原了设计师的设计。