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

过去我遇到过这个问题并记得在网上某处读取，避免border-color: transparent设置会解决问题。我不记得我在哪里读过它。

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

在Chrome v56（开发），Safari 10（Mac），Safari 5（Windows），Safari（iOS），IE11，Edge，Firefox 47.0.1，Opera 41上测试。

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

＆＃13;

＆＃13;

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

＆＃13;

<div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下可能是有用的补充信息。对于Safari 11（发布时），接受的答案仍然是正确的，但是为了记录，我还发现，使用 border-image：url ，Safari（v11）将接受速记边框，使用透明， 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;
}

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