html边框的圆点线,html – 如何增加点状边框点之间的空间

这个技巧适用于水平和垂直边框：

/*Horizontal*/

background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);

background-position: bottom;

background-size: 3px 1px;

background-repeat: repeat-x;

/*Vertical*/

background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);

background-position: right;

background-size: 1px 3px;

background-repeat: repeat-y;

您可以使用背景大小和具有线性梯度百分比的比例调整大小。在这个例子中，我有一个1px点和2px间距的虚线。

这样你可以有多个虚线边框使用多个背景。

尝试在这个JSFiddle或看看代码片段示例：

div {

padding: 10px 50px;

}

.dotted {

border-top: 1px #333 dotted;

}

.dotted-gradient {

background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);

background-position: top;

background-size: 3px 1px;

background-repeat: repeat-x;

}

.dotted-spaced {

background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);

background-position: top;

background-size: 10px 1px;

background-repeat: repeat-x;

}

.left {

float: left;

padding: 40px 10px;

background-color: #F0F0DA;

}

.left.dotted {

border-left: 1px #333 dotted;

border-top: none;

}

.left.dotted-gradient {

background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);

background-position: left;

background-size: 1px 3px;

background-repeat: repeat-y;

}

.left.dotted-spaced {

background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);

background-position: left;

background-size: 1px 10px;

background-repeat: repeat-y;

}

no

border

dotted

border

dotted

with gradient

dotted

spaced

no

border

dotted

border

dotted

with gradient

dotted

spaced