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

回答

相關問題