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 {
transparent中文意思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上基本是⼀致的效果，质量较⾼的还原了设计师的设计。