使用css渐变的虚线边框

Question

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

我试图通过CSS渐变来弄清楚如何做到这一点。

如果有可能控制短划线长度会很酷。

Answer 1

您可以使用border-image：

＆＃13;

＆＃13;

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;
  }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;