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

Question

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

（我猜是IE 11，不是IE 10。感谢指正！）

我以为它只是我的 CSS，所以我真的简化了它并做了一个小提琴。你可以在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>

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

指导很有帮助。

谢谢。

Answer 1

以下可能是有用的补充信息。已接受的答案对于 Safari 11 仍然是正确的（截至发帖时），但作为记录，我还发现使用 border-image:url，Safari(v11) 将接受速记边框， transparent, if 你列出了 -webkit- 供应商前缀 last，像这样：

div {
  border:1px solid transparent;
  border-image:url([some-border-image]) 1 0 1 repeat;
  -webkit-border-image:url([some-border-image]) 1 0 1 repeat;
}

由于最后列出供应商前缀是不标准的，我更喜欢接受的答案，因为大多数网络标准都友好。

Answer 2

我过去曾遇到过这个问题，记得在网上某处阅读过，避免使用 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>