<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

这就是我所做的——使用图像 在这里输入图像描述

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

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

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

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

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

我们需要有圆圈，这就是我们如何解决它:)

这或多或少是对需要样式化“border”的元素做的:

:before {
      position: absolute;
      width: 100%;
      height: 10px;
      top:0;
      left: 0;
      transform: translateY(-50%);
      content: '';
      background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
    }

演示:https://codepen.io/arnoldsv/pen/PoWYxbg

你可以创建一个画布(通过javascript)并在里面画一条虚线。在画布内，您可以控制多长破折号和之间的空间应该。

所以从给出的答案开始，应用CSS3允许多个设置的事实-下面的代码对于创建一个完整的框是有用的:

#border { width: 200px; height: 100px; background: yellow; text-align: center; line-height: 100px; background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%); background-position: top, right, bottom, left; background-repeat: repeat-x, repeat-y; background-size: 10px 1px, 1px 10px; } <div id="border"> bordered area </div>

值得注意的是，背景大小的10px给出了破折号和空白将覆盖的区域。背景标签的50%是虚线的实际宽度。因此，可以在每条边界上使用不同长度的破折号。