CSS边框图像渐变在Safari 10中不起作用 [英] CSS Border Image Gradient Not Working in Safari 10

问题描述

我遇到了Safari 10和CSS边框图像渐变的问题.它可以在所有其他浏览器中使用，甚至可以在Safari 9中使用.它甚至可以在在线模拟器中的Safari 10中显示.请查看下面的图片:

I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below:

(我想这是IE 11，而不是IE10.感谢您的指正！)

(I guess that's IE 11, not IE 10. Thanks for the correction!)

我以为那只是我的CSS，所以我真的简化了它，做了个小提琴.您可以在 https://jsfiddle.net/tgbuxkee/

I assumed it was just my CSS so I really simplfied it and made a fiddle. You can see it at 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 ，但是我没有不要以为是这种情况(也许是这样).

Does anybody have any idea why this could be happening? I know there is a bug with some image borders in Safari but I don't think that is the case here (maybe it is).

指导很有帮助.

谢谢.

推荐答案

我过去曾遇到过此问题，并记得在网络上读过一些文章，避免使用border-color: transparent设置可以解决问题.我不记得从哪里读到的.

I have run into this issue in the past and remember reading somewhere on the web that avoiding the border-color: transparent setting would solve the problem. I don't remember where I read about it.

似乎Mac上的Safari 10优先考虑边框图像上的透明边框颜色，因此什么也不显示.只需单独设置border-width和border-style即可解决.此解决方案也可以在其他受支持的浏览器上使用.

It seems like Safari 10 on Mac gives preference to the transparent border color over the border image and so displays nothing. Just setting the border-width and border-style alone would solve it. This solution works on other supported browsers also.

在Chrome v56(dev)，Safari 10(Mac)，Safari 5(Windows)，Safari(iOS)，IE11，Edge，Firefox 47.0.1，Opera 41上进行了测试.

Tested on Chrome v56 (dev), Safari 10 (Mac), Safari 5 (Windows), Safari (iOS), IE11, Edge, Firefox 47.0.1, Opera 41.

注意:您在问题中引用了IE10，但据我所知

Note: You've quoted IE10 in the question but as far as I know border-image doesn't work in it and so the given solution also doesn't.

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>

这篇关于CSS边框图像渐变在Safari 10中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！