CSS设置虚线的密度

怎么设置 CSS border 虚线之间间隔（密度）

来源：极客头条

怎么设置 CSS border 虚线之间间隔（密度）

标签：CSS 更新时间：2016-07-25 评分17.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。

实例代码：

test

效果演示：

test

注意：只有border-top-image、border-bottom-image、border-leftp-image和border-right-image四个区块会受到repeat、round和stretch属性值影响。因此，可以通过控制这四个图片区域线段长度，控制border虚线之间间隔。