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中有一些图像边框的错误,但我不认为这是这种情况(也许是这样).

指导很有帮助.

谢谢.

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,它不起作用,因此给定的解决方案也没有.

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>