此技巧适用于水平和垂直边框：
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;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;}<div>no <br>border</div><div >dotted <br>border</div><div >dotted <br>with gradient</div><div >dotted <br>spaced</div><div >no <br>border</div><div >dotted <br>border</div><div >dotted <br>with gradient</div><div >dotted <br>spaced</div>
