CSS边框图像渐变不适用于Safari 10

我遇到了Safari 10和CSS边框图像渐变的问题。它适用于所有其他浏览器，甚至在Safari 9中。它甚至可以在Safari 10在线模拟器中显示。请参阅下图：CSS边框图像渐变不适用于Safari 10

（我想这是IE 11，而不是IE 10.感谢您的指正！）

我以为这只是我的CSS所以我真的simplfied它，并提出了小提琴。你可以在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>

没有任何人有任何想法，为什么这可能发生？我知道有一个bug在Safari中有一些图像边界，但我不认为这是这种情况（也许是这样）。

而指导是有帮助的。

谢谢。

来源

2016-12-01 Kenton de Jong

我已经在过去看到过这个，但我不是100％确定它仍然可以工作（所以还没有发布答案）。而不是'border：6px solid transparent';试试设置'border-width：6px; border-style：solid;'（no'border-color'）和过去常用的工具。它也适用于其他浏览器，因为图像会覆盖颜色。 – Harry

我以前遇到过这个问题，请记住阅读网络上的某个地方，避免border-color: transparent设置可以解决问题。我不记得我在哪里读过它。

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

测试在Chrome V56（DEV），Safari浏览器10（苹果机），Safari 5的（Windows）中，Safari浏览器（IOS），IE11，边缘，火狐47.0.1，歌剧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>

来源

2016-12-01 08:21:24 Harry

这就是解决方案！多么奇怪的“功能”。非常感谢！我想我使用IE 11. –

不客气@KentondeJong。乐于帮助：） – Harry

以下可以是有益的补充信息。接受的答案仍然适用于Safari 11（截至发布时），但为了记录，我还发现，Safari（v11）将接受速记边框，透明，，如果你列出-webkit-供应商名称最后，像这样：

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-23 20:34:04 user16119

CSS边框图像渐变不适用于Safari 10

回答

相关问题