我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
这是一个非常老的问题,但它在谷歌中有很高的排名,所以我将抛出我的方法,它可以根据你的需要工作。
在我的例子中,我想要一个粗虚线边界,在虚线之间有一个最小的中断。我用一个CSS图案生成器(比如:http://www.patternify.com/)创建了一个10px宽1px高的图案。其中9px为纯色,1px为白色。
在我的CSS中,我将该图案作为背景图像,然后使用background-size属性将其放大。我最终得到了一个20px * 2px的重复破折号,18px的实线和2px的白色。你可以把虚线放大一点。
好的方面是,由于图像被编码为数据,因此不需要额外的外部HTTP请求,因此没有性能负担。我将图像存储为SASS变量,以便在我的站点中重用它。
其他回答
你可以创建一个画布(通过javascript)并在里面画一条虚线。在画布内,您可以控制多长破折号和之间的空间应该。
如果你只针对现代浏览器,并且你可以在一个独立的元素上设置边框,那么你可以使用CSS缩放变换来获得一个更大的点或破折号:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
它需要大量的位置调整才能让它对齐,但它是有效的。通过改变边框的厚度,起始大小和比例因子,你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。
<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;"> </div>
这就是我所做的——使用图像 在这里输入图像描述
这是一个古老但仍然非常相关的话题。目前最上面的答案很好,但只适用于非常小的点。正如Bhojendra Rauniyar已经在评论中指出的,对于较大的点(>2px),点看起来是方形的,而不是圆形的。我发现这个页面搜索的是间隔点,而不是间隔方块(甚至破折号,就像这里的一些答案使用的那样)。
在此基础上,我使用了径向梯度。同样,使用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>
径向梯度期望:
形状和可选位置 两个或更多的停止:一个颜色和半径
在这里,我想要一个直径为5像素(半径为2.5px)的点,点之间的直径为2倍(10px),加起来为15px。背景尺寸应该与这些相匹配。
这两个站点的定义是这样的点是漂亮的和光滑的:纯黑色的一半半径和比梯度到整个半径。
这使用了标准的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>
应用于小元素的大圆角可能会产生一些有趣的效果。