如何增加虚线边界点之间的空间

小开

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

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

hidden:与'none'相同，不同之处在于边境冲突解决表李元素。< / >
虚线:短串破折号或线段。
double:连续两次加起来等于像素量的行定义为border-width.
inset:制作盒子李嵌入式出现。< / >
outset:相反 “插图”。使盒子呈现3D 李(压花)。< / >
ridge:与之相反 “槽”。边框显示为3D 李(出来)。< / >
solid:单个，直线，实线。

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

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

小开

哎呀，没有办法做到这一点。你可以使用一个虚线边界或可能增加边界的宽度一点，但只是得到更多的间隔点是不可能的CSS。

小开

简单的回答:你不能。

你必须使用border-image属性和一些图像。

小开

你不能用纯CSS做到这一点——CSS3规范甚至有一个关于它的特定引用:

注意:不能控制点和破折号的间距，也不能控制破折号的长度。实现被鼓励选择一个使角对称的间距。

然而，你可以使用一个border-image或背景图像来完成这个任务。

小开

这是我在最近的一个项目中使用的一个技巧，它几乎可以实现我想要的任何水平边框。每次需要水平边框时，我都使用<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属性。

小开

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

小开

最佳答案

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

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

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

小开

所以很多人都说“你不能”。是的，你可以。的确，css没有规则来控制破折号之间的排水沟空间，但css还有其他功能。不要急于说一件事做不到。

.hr {
border-top: 5px dashed #CFCBCC;
margin: 30px 0;
position: relative;
}


.hr:before {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -2px;
width: 100%;
}


.hr:after {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -13px;
width: 100%;
}

基本上，border-top高度(在本例中为5px)是决定沟槽“宽度”的规则。当然，你需要调整颜色来匹配你的需要。这也是一个水平线的小例子，用左和右来做垂直线。

小开

这是一个非常老的问题，但它在谷歌中有很高的排名，所以我将抛出我的方法，它可以根据你的需要工作。

在我的例子中，我想要一个粗虚线边界，在虚线之间有一个最小的中断。我使用了一个CSS图案生成器(就像这个:http://www.patternify.com/)来创建一个10px宽1px高的图案。其中9px为纯色，1px为白色。

在我的CSS中，我将该图案作为背景图像，然后使用background-size属性将其放大。我最终得到了一个20px * 2px的重复破折号，18px的实线和2px的白色。你可以把虚线放大一点。

好的方面是，由于图像被编码为数据，因此不需要额外的外部HTTP请求，因此没有性能负担。我将图像存储为SASS变量，以便在我的站点中重用它。

小开

这使用了标准的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>

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

小开

所以从给出的答案开始，应用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%是虚线的实际宽度。因此，可以在每条边界上使用不同长度的破折号。

小开

基于@Eagorajose的答案，用速记语法构建4个边的解决方案:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    

width: 100px;
height: 100px;
}

<div id="page"></div>

小开

这是一个古老但仍然非常相关的话题。当前顶部答案工作得很好，但只适用于非常小的点。正如Bhojendra Rauniyar已经在评论中指出的，对于较大的点(>2px)，点看起来是方形的，而不是圆形的。我发现这个页面搜索间隔点，而不是广场(甚至破折号，因为这里的一些答案使用)。

在此基础上，我使用了radial-gradient。同样，使用答案来自Ukuser32，可以很容易地为所有四个边框重复点属性。只有角落不完美。

div {
padding: 1em;
background-image:
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
background-position: top, right, bottom, left;
background-size: 15px 5px, 5px 15px;
background-repeat: repeat-x, repeat-y;
}

<div>Some content with round, spaced dots as border</div>

The radial-gradient expects:

the shape and optional position
two or more stops: a color and radius

Here, I wanted a 5 pixel diameter (2.5px radius) dot, with 2 times the diameter (10px) between the dots, adding up to 15px. The background-size should match these.

The two stops are defined such that the dot is nice and smooth: solid black for half the radius and than a gradient to the full radius.

小开

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

这就是我所做的-使用图像在这里输入图像描述 < / p >

小开

我做了一个javascript函数，用svg创建点。你可以在javascript代码中调整点间距和大小。

var make_dotted_borders = function() {
// EDIT THESE SETTINGS:
    

var spacing = 8;
var dot_width = 2;
var dot_height = 2;
    

//---------------------


var dotteds = document.getElementsByClassName("dotted");
for (var i = 0; i < dotteds.length; i++) {
var width = dotteds[i].clientWidth + 1.5;
var height = dotteds[i].clientHeight;


var horizontal_count = Math.floor(width / spacing);
var h_spacing_percent = 100 / horizontal_count;
var h_subtraction_percent = ((dot_width / 2) / width) * 100;


var vertical_count = Math.floor(height / spacing);
var v_spacing_percent = 100 / vertical_count;
var v_subtraction_percent = ((dot_height / 2) / height) * 100;


var dot_container = document.createElement("div");
dot_container.classList.add("dot_container");
dot_container.style.display = getComputedStyle(dotteds[i], null).display;


var clone = dotteds[i].cloneNode(true);


dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
dot_container.appendChild(clone);


for (var x = 0; x < horizontal_count; x++) {
// The Top Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";


var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
dot.style.left = left_percent + "%";
dot.style.top = (-dot_height / 2) + "px";
dot_container.appendChild(dot);


// The Bottom Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";


dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
dot.style.top = height - (dot_height / 2) + "px";
dot_container.appendChild(dot);
}


for (var y = 1; y < vertical_count; y++) {
// The Left Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";


dot.style.left = (-dot_width / 2) + "px";
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
dot_container.appendChild(dot);
}
for (var y = 0; y < vertical_count + 1; y++) {
// The Right Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";


dot.style.left = width - (dot_width / 2) + "px";
if (y < vertical_count) {
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
}
else {
dot.style.top = height - (dot_height / 2) + "px";
}


dot_container.appendChild(dot);
}
}
}


make_dotted_borders();

div.dotted {
display: inline-block;
padding: 0.5em;
}


div.dot_container {
position: relative;
margin-left: 0.25em;
margin-right: 0.25em;
}


div.dot {
position: absolute;
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}

<div class="dotted">Lorem Ipsum</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"是必要的:

: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

小开

虽然迟到了，但我在网上找到了这个小巧玲珑的工具。

< a href = " https://kovart.github。io / dashed-border-generator noreferrer“rel = > https://kovart.github.io/dashed-border-generator/ < / >

小开

下面是一个只使用CSS的解决方案，使用剪辑路径来掩盖多余的边界。与投票最多的答案不同，这个答案允许透明的背景。您还可以通过将剪辑路径圆形属性匹配到border-radius来使用get圆角边框。

.demo {
display: inline-flex;
width: 200px;
height: 100px;
position: relative;
clip-path: inset(0 round 30px 0 30px 0);
}


.demo::before {
content: '';
position: absolute;
left: -7px;
top: -7px;
right: -7px;
bottom: -7px;
border: 8px dashed rgba(0, 0, 255, 0.3);
border-radius: 37px 0 37px 0;
box-sizing: border-box;
}

<div class="demo"></div>

Here's a sass mixin for those interested

=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)
    

$corners: ''
    

@for $i from 1 through length($round)
$value: nth($round, $i)
@if $value != 0
$corners: unquote($corners + calc(#{$value} - #{$size}) + ' ')
@else
$corners: unquote($corners + #{$value} + ' ')
    

clip-path: inset(0 round $corners)
    

&::before
content: ''
position: absolute
left: - $size + $thickness
top: - $size + $thickness
right: - $size + $thickness
bottom: - $size + $thickness
border: $size dashed $color
border-radius: $round
box-sizing: border-box