控制虚线边框笔划长度和笔划之间的距离
是否可以在CSS中控制虚线边框笔画之间的长度和距离？
下面的示例在浏览器之间显示有所不同：
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}<div>I have a dashed border!</div>大差异：IE 11 / Firefox / Chrome
是否有任何方法可以更好地控制虚线边框外观？
Is it possible to control the length and distance between dashed border strokes in CSS?
This example below displays differently between browsers:
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}<div>I have a dashed border!</div>Big differences: IE 11 / Firefox / Chrome
Are there any methods that can provide greater control of the dashed borders appearance?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（11）
本机虚线边框属性值不提供对虚线本身的控制...因此请使用
border-image属性！使用
border-image创建您自己的边框兼容性：它提供出色的浏览器支持（IE 11 和所有现代浏览器）。可以将正常边框设置为旧版浏览器的后备。
让我们创建这些
边框，这些边框将在跨浏览器上显示完全相同！
步骤 1 - 创建合适的图像
此示例为 15 像素宽 x 15 像素高，间隙当前为 5 像素宽。它是具有透明度的 .png。
这是在 Photoshop 中放大时的样子：
这就是缩放后的样子:
控制间隙和描边长度
要创建更宽/更短的间隙或描边，请加宽/缩短间隙或图像中的笔画。
这是一个具有更宽 10 像素间隙的图像：
步骤 2 - 创建 CSS - 此示例需要 4 个基本步骤
定义 边框图像源：
默认值为 1。也可以设置为像素值、百分比值或其他倍数（1x、2x、3x 等）。这会覆盖任何
border-width设置。定义border-image-slice：
：在这个例子中，图像的上、右、下、左边框的厚度是 2px，并且它们之外没有间隙，所以我们的切片值为 2：
切片看起来像这样，距离上、右、下各 2 个像素左：
在此示例中，我们希望图案在 div 周围均匀地重复。所以我们选择：
书写简写
上面的属性可以单独设置，也可以使用 border-image：
完整示例
注意：
border-style必须设置为一个值，例如solid或 < code>dashed 因为初始边框样式是none。或者，您可以添加后备边框，例如本例中的border: dashed 4px #000，不支持的浏览器将收到此边框。The native dashed border property value does not offer control over the dashes themselves... so bring on the
border-imageproperty!Brew your own border with
border-imageCompatibility: It offers great browser support (IE 11 and all modern browsers). A normal border can be set as a fallback for older browsers.
Let's create these
These borders will display exactly the same cross-browser!
Step 1 - Create a suitable image
This example is 15 pixels wide by 15 pixels high and the gaps are currently 5px wide. It is a .png with transparency.
This is what it looks like in photoshop when zoomed in:
This is what it looks like to scale:
Controlling gap and stroke length
To create wider / shorter gaps or strokes, widen / shorten the gaps or strokes in the image.
Here is an image with wider 10px gaps:
Step 2 - Create the CSS — this example requires 4 basic steps
Define the border-image-source:
Optional - Define the border-image-width:
The default value is 1. It can also be set with a pixel value, percentage value, or as another multiple (1x, 2x, 3x etc). This overrides any
border-widthset.Define the border-image-slice:
In this example, the thickness of the images top, right, bottom and left borders is 2px, and there is no gap outside of them, so our slice value is 2:
The slices look like this, 2 pixels from the top, right, bottom and left:
In this example, we want the pattern to repeat itself evenly around our div. So we choose:
Writing shorthand
The properties above can be set individually, or in shorthand using border-image:
Complete example
Note:
border-stylemust be set to a value such assolidordashedas the initial border style isnone. Alternatively, you can add a fallback border, such asborder: dashed 4px #000in this example, non-supporting browsers will receive this border.除了 border-image 属性之外，还有一些其他方法可以创建虚线边框，并控制笔画的长度和笔画之间的距离。它们的描述如下：
方法 1：使用 SVG
我们可以通过使用
path或polygon元素并设置Strong-dasharray属性。该属性采用两个参数，其中一个参数定义破折号的大小，另一个确定它们之间的间距。优点：
path替换为circle，如 这个答案（或）将路径转换为圆形。缺点：
vector-effect='non-scaling-lines'（如第二个框中所示）来控制，但 IE 中对此属性的浏览器支持为零。方法2：使用渐变
我们可以使用多个线性渐变背景图像并将它们适当放置以创建虚线边框效果。这也可以通过重复线性梯度来完成，但由于使用重复梯度，并没有太大的改进，因为我们需要每个梯度仅在一个方向上重复。
优点：
缺点：
border-radius时无法使用，因为背景不会根据border-radius弯曲。相反，它们被剪掉了。方法 3：框阴影
我们可以使用伪元素创建一个小条（以破折号的形状），然后创建它的多个
box-shadow版本来创建边框，如下面的代码片段所示。如果破折号是正方形，那么单个伪元素就足够了，但如果它是矩形，我们需要一个伪元素用于顶部 + 底部边框，另一个伪元素用于左 + 右边框。这是因为顶部边框上的破折号的高度和宽度与左侧的破折号不同。
优点：
缺点：
In addition to the
border-imageproperty, there are a few other ways to create a dashed border with control over the length of the stroke and the distance between them. They are described below:Method 1: Using SVG
We can create the dashed border by using a
pathor apolygonelement and setting thestroke-dasharrayproperty. The property takes two parameters where one defines the size of the dash and the other determines the space between them.Pros:
border-radiusinvolved. We would just have replace thepathwith acirclelike in this answer (or) convert thepathinto a circle.Cons:
vector-effect='non-scaling-stroke'(as in the second box) but the browser support for this property is nil in IE.Method 2: Using Gradients
We can use multiple
linear-gradientbackground images and position them appropriately to create a dashed border effect. This can also be done with arepeating-linear-gradientbut there is not much improvement because of using a repeating gradient as we need each gradient to repeat in only one direction.Pros:
Cons:
border-radiusis involved because backgrounds don't curve based onborder-radius. They get clipped instead.Method 3: Box Shadows
We can create a small bar (in the shape of the dash) using pseudo-elements and then create multiple
box-shadowversions of it to create a border like in the below snippet.If the dash is a square shape then a single pseudo-element would be enough but if it is a rectangle, we would need one pseudo-element for the top + bottom borders and another for left + right borders. This is because the height and width for the dash on the top border will be different from that on the left.
Pros:
Cons:
border-radiusbut positioning them would be very tricky with having to find points on a circle (and possibly eventransform).有一个由 @kovart 制作的很酷的工具，称为 虚线边框生成器。
它使用 svg 作为背景图像来允许设置您想要的笔划破折号数组，并且非常方便。
然后，您只需将其用作元素上的背景属性来代替边框：
There's a cool tool made by @kovart called the dashed border generator.
It uses an svg as a background image to allow setting the stroke dash array you desire, and is pretty convenient.
You would then simply use it as the background property on your element in place of the border:
更新
感谢 kovart 提供了这个很棒的工具，尝试一下
https://kovart.github.io/dashed-border-generator/
我的回答是：
我最近也遇到了同样的问题。
我已经解决了这个问题，希望对某人有所帮助。
HTML + 顺风
CSS
Update
Thanks to kovart for this great tool try it
https://kovart.github.io/dashed-border-generator/
my answer was:
I just recently had the same problem.
I have made this work around, hope it will help someone.
HTML + tailwind
CSS
简而言之：不，不是。您将不得不使用图像。
Short one: No, it's not. You will have to work with images instead.
CSS 渲染是特定于浏览器的，我不知道对其进行任何微调，您应该按照 Ham 的建议使用图像。
参考：http://www.w3.org/TR/CSS2 /box.html#border-style-properties
Css render is browser specific and I don't know any fine tuning on it, you should work with images as recommended by Ham.
Reference: http://www.w3.org/TR/CSS2/box.html#border-style-properties
笔划长度取决于笔划宽度。您可以通过增加宽度来增加长度，并通过内部元素隐藏部分边框。
编辑： 添加了
pointer-events: none;感谢 benJ。https://jsfiddle.net/ksf9zoLh/
Stroke length depends on stroke width. You can increase length by increasing width and hide part of border by inner element.
EDIT: added
pointer-events: none;thanks to benJ.https://jsfiddle.net/ksf9zoLh/
如果溢出隐藏不是问题，则概述 4 而不是 48。
if overflow hidden not problem else outline 4 instead 48.
我想我刚刚通过使用
clip-path属性找到了解决此问题的最终解决方案。基本上只需添加虚线边框然后掩盖多余的部分即可。clip-path属性还支持圆角，因此您可以将其与border-radius匹配，并具有自定义虚线边框和圆角！当然，您可以直接在
div本身上执行此操作，而无需使用::after伪元素。但这意味着您必须剪辑到div中，并且它最终会小于其初始大小。I think I've just found the definitive solution to this problem with the use of
clip-pathproperty. Basically all there is to add a dashed border then mask the excess.The
clip-pathproperty also supports rounded corners so you can match it up with theborder-radiusand have custom dashed borders and rounded corners!You could do this directly on the
divitself of course without using the::afterpseudo element. But this would mean you have to clip into thedivand it would end up smaller than it's initial size.我最近也遇到了同样的问题。
我设法用两个带有边框的绝对定位 div（一个用于水平，一个用于垂直），然后转换它们来解决这个问题。
外盒只需相对定位即可。
注意：我在这个例子中使用了快子，但我想这些类是不言自明的。
I just recently had the same problem.
I managed to solve it with two absolutely positioned divs carrying the border (one for horizontal and one for vertical), and then transforming them.
The outer box just needs to be relatively positioned.
Note: i used tachyons in this example, but i guess the classes are kind of self-explanatory.
这将使用 div 上的 class="myclass" 创建橙色和灰色边框。
This will make an orange and gray border using the class="myclass" on the div.