这使用了标准的CSS边框和一个伪元素+overflow:hidden。 在这个例子中，你得到了三个不同的2px虚线边界:normal，间隔为5px，间隔为10px。实际上是10px，只有10-8=2px可见。

div.two{border:2px dashed #FF0000} div.five:before { content: ""; position: absolute; border: 5px dashed #FF0000; top: -3px; bottom: -3px; left: -3px; right: -3px; } div.ten:before { content: ""; position: absolute; border: 10px dashed #FF0000; top: -8px; bottom: -8px; left: -8px; right: -8px; } div.odd:before {left:0;right:0;border-radius:60px} div { overflow: hidden; position: relative; text-align:center; padding:10px; margin-bottom:20px; } <div class="two">Kupo nuts here</div> <div class="five">Kupo nuts<br/>here</div> <div class="ten">Kupo<br/>nuts<br/>here</div> <div class="ten odd">Kupo<br/>nuts<br/>here</div>

应用于小元素的大圆角可能会产生一些有趣的效果。

在我的情况下，我需要弯曲的角和薄边界，所以我想出了这个解决方案:

/* For showing dependencies between attributes */ :root { --border-width: 1px; --border-radius: 4px; --bg-color: #fff; } /* Required: */ .dropzone { position: relative; border: var(--border-width) solid transparent; border-radius: var(--border-radius); background-clip: padding-box; background-color: var(--bg-color); } .dropzone::before { content: ''; position: absolute; top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */ right: calc(var(--border-width) * -1); bottom: calc(var(--border-width) * -1); left: calc(var(--border-width) * -1); z-index: -1; background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px); border-radius: var(--border-radius); background-color: rgba(0, 0, 0, 0.38); } /* Optional: */ html { background-color: #fafafb; display: flex; justify-content: center; } .dropzone { box-sizing: border-box; height: 168px; padding: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .dropzone::before { transition: background-color 0.2s ease-in-out; } .dropzone:hover::before { background-color: rgba(0, 0, 0, 0.87); } <div class='dropzone'> Drag 'n' drop some files here, or click to select files </div>

其思想是将svg模式放在元素后面，并仅显示该模式的细线作为元素边界。

border-style的可用值请参阅MDN文档:

none:没有边框，设置宽度为0。 这是默认值。

hidden:与'none'相同，不同之处在于 边境冲突解决表 元素。 虚线:短的系列 破折号或线段。 点: 一系列的点。 双倍的:两连 加起来等于像素量的行 定义为border-width。 槽: 雕刻效果。 插图:制作盒子 嵌入的出现。 开始:相反的 “插图”。使盒子呈现3D (压花)。 脊:相对的 “槽”。边框显示为3D (出来)。 单体:单体， 直线，实线。

除了这些选择之外，没有任何方法可以影响标准边框的样式。

如果你不喜欢这种可能性，你可以使用CSS3的border-image，但请注意，浏览器对此的支持仍然非常不稳定(编辑:截至2020年，浏览器的支持很好)。

这个技巧对水平和垂直边框都有效:

/*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;

你可以用background-size调整大小，用线性梯度百分比调整比例。在这个例子中，我有一条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 class='dotted'>dotted <br>border</div> <div class='dotted-gradient'>dotted <br>with gradient</div> <div class='dotted-spaced'>dotted <br>spaced</div> <div class='left'>no <br>border</div> <div class='dotted left'>dotted <br>border</div> <div class='dotted-gradient left'>dotted <br>with gradient</div> <div class='dotted-spaced left'>dotted <br>spaced</div>

如果你只针对现代浏览器，并且你可以在一个独立的元素上设置边框，那么你可以使用CSS缩放变换来获得一个更大的点或破折号:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

它需要大量的位置调整才能让它对齐，但它是有效的。通过改变边框的厚度，起始大小和比例因子，你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。

这是我在最近的一个项目中使用的一个技巧，它几乎可以实现我想要的任何水平边框。每次需要水平边框时，我都使用<hr/>。给这个hr添加边框的基本方法是

 hr {border-bottom: 1px dotted #000;}

但如果你想控制边界，例如增加点之间的间距，你可以尝试这样做:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

在下面，你创建你的边界(这里是一个点的例子)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

这也意味着你可以添加文本阴影的点，梯度等。你想要什么都行……

它对水平边界非常有效。如果你需要垂直的，你可以为另一个hr指定一个类，并使用CSS3的rotation属性。