CSS 边框图像渐变在 Safari 10 中不起作用

Question

我遇到了 Safari 10 和 CSS 边框图像渐变的问题。它适用于所有其他浏览器，甚至适用于 Safari 9。它甚至出现在 Safari 10 的在线模拟器中。请看下面的图片:

(我猜那是 IE 11，而不是 IE 10。感谢您的更正!)

我以为这只是我的 CSS，所以我真的简化了它并做了一个 fiddle 。你可以在https://jsfiddle.net/tgbuxkee/看到它

它也在下面生成。

div {
  width: 200px;
  height: 200px;
  border: 6px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
    -webkit-border-image-slice: 2;
    border-image-slice: 2;
  
}

<div>

</div>

有人知道为什么会发生这种情况吗？我知道有一个 bug在 Safari 中有一些图像边框，但我认为这里不是这种情况(也许是)。

指导很有帮助。

谢谢。

Answer 1

我过去曾遇到过这个问题，记得在网上某处读到过避免 border-color: transparent 设置可以解决问题。我不记得我是在哪里读到的。

似乎 Mac 上的 Safari 10 优先选择边框图像上的透明边框颜色，因此不显示任何内容。只需设置 border-width 和 border-style 即可解决。此解决方案也适用于其他受支持的浏览器。

在 Chrome v56 (dev)、Safari 10 (Mac)、Safari 5 (Windows)、Safari (iOS)、IE11、Edge、Firefox 47.0.1、Opera 41 上测试。

注意:您在问题中引用了 IE10，但据我所知 border-image doesn't work in it所以给定的解决方案也没有。

div {
  width: 200px;
  height: 200px;
  border-width: 6px;
  border-style: solid;
  -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
  border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
  -webkit-border-image-slice: 2;
  border-image-slice: 2;
}

<div>

</div>