html间隔大的虚线,html如何增加虚线边框之间的间距_html_开发99编程知识库

這裡技巧適用於水平邊框和垂直邊框：/*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 嘗試它，或者查看代碼Fragment示例：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