使用css渐变的虚线边框

我在试图找出如何添加在最新的Firefox，Chrome，Safari和IE10 +浏览器中看起来相同的虚线边框。普通的1px dashed #000不适用于我，因为它在所有浏览器中都不同，并且image不能缩放。使用css渐变的虚线边框

我想弄清楚如何做到这一点的CSS渐变。

如果有控制短划线长度的可能性，这将很酷。

来源

2016-11-08 Rantiev

的[控制笔划之间的虚线边框行程长度和距离]可能的复制（http://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-stroke） – secelite

这可能也有助于理解如何生成短跑+渐变 - http://stackoverflow.com/questions/32500570/gradient- line-with-dashed-pattern/32501799＃32501799（不确定你的意思是创建了一个虚线边界* us ing *渐变或带*渐变的虚线边框） – Harry

使用css渐变创建的虚线边框，下次更精确，谢谢。 – Rantiev

可以使用border-image为：

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    border: 10px solid transparent; 
 
     -webkit-border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    -o-border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    }

<div></div>

来源

2016-11-08 15:22:09 Justinas

ie10-11呢？它会在那里工作吗？这一点很重要。正如我写的，我不想使用图像，我曾经在过去削减单一的破折号的图像，但doent喜欢那个解决方案。 – Rantiev

@Rantiev如果你依赖于浏览器的默认样式，而不是接受样式可能会改变，这取决于浏览器和操作系统 – Justinas

我想在我提供的浏览器列表中使用渐变完成相同的虚线边框。 – Rantiev

使用css渐变的虚线边框

回答

相关问题