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>

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

指导很有帮助。

谢谢。

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>

Answer 2

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

由于 non-standard 最后列出供应商前缀，我更喜欢接受的答案，因为大多数 Web 标准都很友好。

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

CSS Border Image Gradient Not Working in Safari 10

css

safari

border-image

css-gradients