有没有办法控制虚线或者点的长度或者间距呢？
You are here
css border 虚线 如何调整间距 距离
星期三, 2016-11-30 10:20 — adminshiping1
CSS 的
发布于2014-11-03 14:54 最佳答案
这个没法设置,想设置圆点之间的距离的话要么就用ps去作图,然后使用background属性,使虚线位于下方.如果你去纠结圆点虚线直接的距离的话,直接border:1px dotted #ccc;搞定 来自 https://segmentfault.com/q/1010000002442556
CSS 的
border: 1px dashed 样式太难看了，虚线非常的宽，dotted 也是一样，间距太窄。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
囧，看来没好办法。不过你可以用图片作边框用。
没有办法。
但SVG线条是可以设置间距的。
path {
stroke-dasharray: 4;
stroke-dashoffset: 22;
}
如果一定要这样，使用一下背景图片也是个选择，切一小片repeat就好了，而且兼容性很好。但如果是竖边框的话，就稍微麻烦些。
怎么设置 CSS border 虚线之间间隔（密度）
怎么设置 CSS border 虚线之间间隔（密度）
标签：CSS 更新时间：2016-07-25 评分13.5 返回首页CSS border-style属性中，dashed 和 dotted 形成虚框间距是无法改变的，但是 CSS3 提供了 border-image 解决了设置 border 虚线间隔的问题。
1、CSS3 border-image 属性基础语法
border-image:border-image-source [border-image-width]{1,4} [border-image-repeat]{0,2}
可以看出 border-image 的参数涉及三个方面：图片，剪裁位置，重复性。
| 属性 | 描述 | 可能的值 |
|---|---|---|
| border-image-source | 设置背景图片 | 可以使用绝对或相对URL地址指定边框的背景图片 |
| border-image-width | 设置边框图片的宽度。 | 可以是具体的像素（px），也可以是百分比（%） |
| border-image-repeat | 设置背景图片的铺放方式 | 平铺(repeated)、铺满(rounded)或拉伸(stretched) |
例如： border-image:url(border.png) 27 repeat; ，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。
2、border-image 设置 CSS border 虚线间隔
在正式绘制边框前，我们先认识一下CSS3 border-image-slice 属性，它可以将border-image-source获取的边框背景图片切割为9份。语法如下：
border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
| border-top-left-image | border-top-image | border-top-right-image |
| border-left-image | border-right-image | |
| border-bottom-left-image | border-bottom-image | border-bottom-right-image |
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。
3、border-image 绘制 CSS border 虚线边框步骤
使用PS绘制边框图片如100*100px的矩形边框图片，切割为九宫格则每格像素为33px。
实例代码：
<style> |
.border_dashed{ |
width:400px; |
height:100px; |
border:1em double; |
border-image:url(dashed.png) 33 repeat; |
} |
</style> |
<div class="border_dashed">test</div> |
效果演示：
test
来自 http://www.tuicool.com/articles/viymqqa
普通分类: