如何增加虚线边框点之间的空间
我在我的盒子里使用了虚线的样式边框
.box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } 我想增加边界的每个点之间的空间。
这个技巧适用于水平和垂直边界：
/*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;
您可以使用背景大小和线性渐变百分比来调整比例。 在这个例子中，我有一个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>
这是我最近使用的一个技巧，用水平边框来实现我想要的任何东西。 每次我需要水平边框时，我都会使用<hr/> 。 添加边界到这个小时的基本方式是类似的
hr {border-bottom: 1px dotted #000;}
但是如果你想控制边界，比如增加点之间的距离，你可以尝试这样的事情：
hr { height:14px; /* specify a height for this hr */ overflow:hidden; }
在下面，你创build你的边框（这里是一个点的例子）
hr:after { content:"......................................................................."; letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/ }
这也意味着你可以添加文字阴影的点，渐变等任何你想要的…
那么，它的水平边界真的很棒。 如果你需要垂直的，你可以指定另一个hr的类并使用CSS3 rotation属性。
你不能用纯CSS做 – CSS3规范甚至有一个具体的报价：
注意：不能控制点和破折号的间距，也不能控制破折号的长度。 鼓励实现select一个使angular点对称的间距。
但是，您可以使用边框图像或背景图像来实现这一技巧。
请参阅MDC文档以获取border-style的可用值：
- none：无边框，将宽度设置为0.这是默认值。
- 隐藏：与“无”相同，除了表格元素的边界冲突解决scheme。
- 虚线：一系列短划线或线段。
- 点缀：点系列。
- 双：两条直线加起来的像素量定义为边界宽度。
- 凹槽：雕刻效果。
- 插图：使框出现embedded。
- 一开始：“inset”的对面。 使框出现3D（浮雕）。
- 脊：与“凹槽”相对。 边框显示3D（出来）。
- 固体：单一，直线，实线。
除了这些select之外，没有办法影响标准边框的风格。
如果可能性不符合你的喜好，你可以使用CSS3的border-image但是请注意浏览器对此的支持还是非常多的。
这是一个非常古老的问题，但它在Google中的排名很高，所以我将会根据您的需求提出一些可行的方法。
在我的情况下，我想要一个粗糙的虚线边框，在破折号之间有一个最小的中断。 我使用了一个CSS模式生成器（像这样： http : //www.patternify.com/ ）创build一个10px宽×1px高的模式。 9px的是纯色的破折号，1px是白色的。
在我的CSS中，我将这个模式作为背景图像，然后通过使用background-size属性进行缩放。 我结束了一个20px的2px重复的短划线，18px的是实线和2px白色。 你可以扩大一个非常粗的虚线。
好的一点是，由于图像被编码为数据，所以没有额外的HTTP请求，所以不存在性能负担。 我把我的图像存储为一个SASSvariables，所以我可以在我的网站中重复使用它。
这使用标准的CSS边界和一个伪元素+溢出：隐藏。 在这个例子中，你会得到三个不同的2px虚线框：普通的，像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>
简短的回答：你不能。
您将不得不使用border-image属性和一些图像。
如果您只针对现代浏览器，并且您可以将边框放在与内容分离的元素上，那么可以使用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%; }
基本上，边界顶部的高度（这种情况下是5px）是决定水槽“宽度”的规则。 如果您需要调整颜色以符合您的需求， 这也是一个水平线的小例子，使用左侧和右侧的垂直线。
AFAIK没有办法做到这一点。 你可以使用一个虚线的边框或者可能增加边框的宽度，但只是获得更多的间距出点是不可能的CSS。
你可以创build一个canvas（通过JavaScript），并在其中绘制一条虚线。 在canvas内，你可以控制短划线和两者之间的距离。
