如何用CSS定义虚线间隔

html-css025

如何用CSS定义虚线间隔,第1张

在正式绘制边框前,我们先认识一下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都可以。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:div {height:60pxborder-bottom:1px dashed}。

3、浏览器运行index.html页面,此时通过css定义了一个水平的虚线。