如何用CSS定义虚线间隔

html-css0277

如何用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>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />

<title>css各种分割线</title>

<style>

body

{

text-align:center

}

.split-line1

{

border-top:solid 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line2

{

border-top:dashed 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line3

{

border-top:dotted 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line4

{

border-top:double 6px #999

width:100%

padding:20px 0px

margin-top:20px

}

</style>

</head>

<body>

第一部分内容

<div class="split-line1">

实线分割线

</div>

<div class="split-line2">

虚线分割线

</div>

<div class="split-line3">

点状分割线

</div>

<div class="split-line4">

双线分割线

</div>

</body>

</html>