CSS 的 border: 1px dashed 样式太难看了，虚线非常的宽，dotted 也是一样，间距太窄。
有没有办法控制虚线或者点的长度或者间距呢？
回答：
可以的，用渐变
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
回答：
没有办法。
但SVG线条是可以设置间距的。
path {
stroke-dasharray: 4;
stroke-dashoffset: 22;
}
回答：
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.
囧，看来没好办法。不过你可以用图片作边框用。
回答：
如果一定要这样，使用一下背景图片也是个选择，切一小片repeat就好了，而且兼容性很好。但如果是竖边框的话，就稍微麻烦些。
回答：
// 让 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%);
}
回答：
@哔哔肾 “鸭式辨型” 这个有意思，思路开阔。
来个伪类写的分割线
&: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上基本是一致的效果，质量较高的还原了设计师的设计。
