控制笔划之间的虚线边框笔划长度和距离

是否有可能控制在CSS中的虚线边框笔画之间的长度和距离？

下面的这个例子在浏览器之间显示不同：

div { border: dashed 4px #000; padding: 20px; display: inline-block; } 

 <div>I have a dashed border!</div> 

差异很大：IE 11 / Firefox / Chrome

有没有什么方法可以更好地控制虚线边框的外观？

Answer 1

Css渲染是浏览器特定的，我不知道有什么微调，你应该使用Ham推荐的图像。 参考： http : //www.w3.org/TR/CSS2/box.html#border-style-properties

Answer 2

本地的虚线边框属性值不提供对破折号本身的控制…所以带上border-image属性！

用border-image自己的边框

兼容性 ：它提供了很好的浏览器支持 （IE 11和所有的现代浏览器）。 正常的边框可以设置为旧版浏览器的后备。

我们来创build这些

这些边界将显示完全相同的跨浏览器！

第1步 – 创build一个合适的图像

这个例子是宽15像素，高15像素，间隙宽5px。 这是一个透明的.png。

这是放大时在photoshop中的样子：

这是它看起来像缩放：

控制间隙和行程长度

要创build更宽/更短的间隙或笔触，请扩大/缩短图像中的间隙或笔划。

这里有一个更宽的10px的图像：

正确缩放=

第2步 – 创buildCSS – 这个例子需要4个基本步骤

1. 定义border-image-source ：

    border-image-source:url("http://i.stack.imgur.com/wLdVc.png"); 

2. 可选 – 定义边框图像宽度 ：

    border-image-width: 1; 

   默认值是1.也可以使用像素值，百分比值或其他倍数（1x，2x，3x等）进行设置。 这将覆盖任何border-width集合。

3. 定义边界图像切片 ：

   在这个例子中，图像的顶部，右侧，底部和左侧的边界的厚度是2px，并且在它们之外没有间隙，所以我们的切片值是2：

    border-image-slice: 2; 

   切片看起来像这样，从顶部，右侧，底部和左侧2像素：

   

4. 定义边界图像重复 ：

   在这个例子中，我们希望模式在我们的div周围均匀重复。 所以我们select：

    border-image-repeat: round; 

写速记

上面的属性可以单独设置，或者使用border-image简写：

 border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round; 

完整的例子

注意border: dashed 4px #000备用。 不支持的浏览器会收到这个边框。

 .bordered { display: inline-block; padding: 20px; /* Fallback dashed border - the 4px width here is overwritten with the border-image-width (if set) - the border-image-width can be omitted below if it is the same as the 4px here */ border: dashed 4px #000; /* Individual border image properties */ border-image-source: url("http://i.stack.imgur.com/wLdVc.png"); border-image-slice: 2; border-image-repeat: round; /* or use the shorthand border-image */ border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round; } /*The border image of this one creates wider gaps*/ .largeGaps { border-image-source: url("http://i.stack.imgur.com/LKclP.png"); margin: 0 20px; } 

 <div class="bordered">This is bordered!</div> <div class="bordered largeGaps">This is bordered and has larger gaps!</div> 

Answer 3

除了border-image属性外，还有其他一些方法可以创build虚线边框，以控制笔画的长度和它们之间的距离。 他们在下面描述：

方法1：使用SVG

我们可以通过使用path或polygon元素并设置stroke-dasharray属性来创build虚线边框。 该属性取两个参数，其中一个定义了破折号的大小，另一个决定了它们之间的空间。

优点：

1. SVG本质上是可缩放的graphics，可以适应任何容器尺寸。
2. 即使存在border-radius也可以很好地工作。 我们只需要用这个答案中的circle代替path （或者）将path转换成一个圆圈。
3. 浏览器对SVG的支持非常好，可以使用V8 for IE8提供回退function。

缺点：

1. 当容器的尺寸没有按比例变化时，path倾向于缩放，导致短划线的尺寸和它们之间的空间发生变化（尝试在片段中的第一个盒子上hover）。 这可以通过添加vector-effect='non-scaling-stroke' （如在第二个框中）来控制，但浏览器对此属性的支持在IE中为零。

 .dashed-vector { position: relative; height: 100px; width: 300px; } svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } path{ fill: none; stroke: blue; stroke-width: 5; stroke-dasharray: 10, 10; } span { position: absolute; top: 0px; left: 0px; padding: 10px; } /* just for demo */ div{ margin-bottom: 10px; transition: all 1s; } div:hover{ height: 100px; width: 400px; } 

 <div class='dashed-vector'> <svg viewBox='0 0 300 100' preserveAspectRatio='none'> <path d='M0,0 300,0 300,100 0,100z' /> </svg> <span>Some content</span> </div> <div class='dashed-vector'> <svg viewBox='0 0 300 100' preserveAspectRatio='none'> <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/> </svg> <span>Some content</span> </div> 

Answer 4

短一个：不，不是。 你将不得不使用图像。