圆点虚线用CSS怎么做

html-css012

圆点虚线用CSS怎么做,第1张

这个没法设置,想设置圆点之间的距离的话要么就用ps去作图,然后使用background属性,使虚线位于下方.如果你去纠结圆点虚线直接的距离的话,直接border:1px dotted #ccc搞定

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>test</title>

<style>

div {

text-align: center

margin-bottom: 20px

width: 100px

height: 100px

line-height: 100px

}

.a {

/*圆点*/

border: 10px dotted red

}

.b {

/*实线*/

border: 10px solid red

}

.c {

/*双实线*/

border: 10px double red

}

.d {

/*虚线*/

border: 10px dashed red

}

</style>

</head>

<body>

<div class="a">

圆点

</div>

<div class="b">

实线

</div>

<div class="c">

双实线

</div>

<div class="d">

虚线

</div>

</body>

</html>