使用 css 渐变的虚线边框

【问题标题】：Dashed border using css gradient使用 css 渐变的虚线边框
【发布时间】：2017-03-22 06:50:17
【问题描述】：

我正在尝试了解如何添加在最新的 Firefox、Chrome、Safari 和 IE10+ 浏览器中看起来相同的虚线边框。普通的1px dashed #000 对我不起作用，因为它在所有浏览器中都不同，而且image 无法扩展。

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

如果有可能控制破折号长度，那就太酷了。

【问题讨论】：

Control the dashed border stroke length and distance between strokes的可能重复
这也可能有助于理解如何生成破折号 + 渐变 - stackoverflow.com/questions/32500570/…（不确定您是指使用渐变创建的虚线边框还是虚线边框带渐变）
用css渐变创建的虚线边框，下次会更准确，谢谢。

标签： css

【解决方案1】：

您可以为此使用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;
  }

&lt;div&gt;&lt;/div&gt;

【讨论】：

ie10-11呢？它会在那里工作吗？这一点很重要。正如我所写，我不想使用图像，我过去曾经剪切过单破折号的图像，但不喜欢那个解决方案。
@Rantiev 如果您依赖浏览器默认样式，请接受样式可能会根据浏览器和操作系统而改变
我想在我提供的浏览器列表中使用渐变完成相同的虚线边框。
@Rantiev 检查此页面：css-tricks.com/examples/GradientBorder