6

我遇到了 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 中的某些图像边框存在错误，但我认为这里不是这种情况（也许是这样）。

指导很有帮助。

谢谢你。

4

2 回答 2

11

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

似乎 Mac 上的 Safari 10 优先使用透明边框颜色而不是边框​​图像，因此什么也不显示。只需设置border-widthandborder-style就可以解决它。此解决方案也适用于其他受支持的浏览器。

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

注意：您在问题中引用了 IE10，但据我所知border-image在其中不起作用，因此给定的解决方案也不起作用。 

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>

于 2016-12-01T08:21:24.207 回答
1

以下可能是有用的补充信息。已接受的答案对于 Safari 11 仍然适用（截至发帖时），但作为记录，我还发现，如果您列出了border-image:url，Safari(v11) 将接受带有transparent的速记边框-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;
}

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

于 2018-02-23T20:34:04.953 回答