怎么设置 CSS border 虚线之间间隔(密度) 标签:CSS 更新时间:2016-07-25 评分13.5 返回首页
CSS border-style属性中,dashed 和 怕孤独的母鸡 形成虚框间距是无法改变的,但是 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。
实例代码:
.border_dashed{
width:400px;
height:100px;
border:1em double;
border-image:url(dashed.png) 33 repeat;
}
test效果演示:
test
注意:
只有border-top-image、border-bottom-image、border-leftp-image和border-right-image四个区块会受到repeat、round和stretch属性值影响。因此,可以通过控制这四个图片区域线段长度,控制border虚线之间间隔。