我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
所以很多人都说“你不能”。是的,你可以。的确,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)是决定沟槽“宽度”的规则。当然,你需要调整颜色来匹配你的需要。这也是一个水平线的小例子,用左和右来做垂直线。
其他回答
这是一个古老但仍然非常相关的话题。目前最上面的答案很好,但只适用于非常小的点。正如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图案生成器(比如:http://www.patternify.com/)创建了一个10px宽1px高的图案。其中9px为纯色,1px为白色。
在我的CSS中,我将该图案作为背景图像,然后使用background-size属性将其放大。我最终得到了一个20px * 2px的重复破折号,18px的实线和2px的白色。你可以把虚线放大一点。
好的方面是,由于图像被编码为数据,因此不需要额外的外部HTTP请求,因此没有性能负担。我将图像存储为SASS变量,以便在我的站点中重用它。
下面是一个只使用CSS的解决方案,使用剪辑路径来掩盖多余的边界。与投票最多的答案不同,这个答案允许透明的背景。您还可以通过将剪辑路径圆形属性匹配到border-radius来使用get圆角边框。
.demo { 显示:inline-flex; 宽度:200 px; 身高:100 px; 位置:相对; 剪辑路径:插入(0圆30px 0 30px 0); } {前.demo:: 内容:”; 位置:绝对的; 左:7 px; 上图:7 px; 右:7 px; 底部:7 px; 边框:8px虚线rgba(0,0,255, 0.3); 边框半径:37px 0 37px 0; box-sizing: border-box; } < div class = "演示" > < / div >
这里有一个sass mixin给感兴趣的人
=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
基于@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 */
#{页 背景:线性渐变(向右,#000 33%,#fff 0%) top/10px 1px repeat-x, /* top */ 线性渐变(#000 33%,#fff 0%)右/1px 10px重复-y, /*右*/ 线性渐变(向右,#000 33%,#fff 0%)底部/10px 1px重复-x, /*底部*/ 线性渐变(#000 33%,#fff 0%) left/1px 10px repeat-y;/* left */ 宽度:100 px; 身高:100 px; } < div id = "页面" > < / div >
<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>
这就是我所做的——使用图像 在这里输入图像描述