html中下划虚线dash定义长度,【CSS】有没有办法自定义 border 为 dashed 时的虚线间距？...

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上基本是一致的效果，质量较高的还原了设计师的设计。