CSS border-image：線性漸變在Safari中不起作用

我有一個小小的CSS方括號事情正在進行。它在Chrome，Firefox中很好用，在IE中很奇怪，但在Safari中卻不行！CSS border-image：線性漸變在Safari中不起作用

.square-brackets { 
padding: 10px 30px; 
margin: auto; 
border: 5px solid transparent; 
border-image:linear-gradient(to right, #92AC3B 0px,#92AC3B 3%, #fff 3%, #fff 98%, #92AC3B 98%, #92AC3B 100%); 
border-image: -webkit-linear-gradient(to right, #92AC3B 0px,#92AC3B 3%, #fff 3%, #fff 98%, #92AC3B 98%, #92AC3B 100%); /* Chrome10+,Safari5.1+ */ 
border-image-slice: 1; 
}

有誰知道什麼可能導致它不會在Safari中呈現？

來源

2017-05-27 Ralphatron

您可以使用SVG，現在每個瀏覽器都支持它。將其轉換爲base64並將其用作背景：url（'data：...'）如果您使用指南針，它可以將css漸變轉換爲背景圖像SVG – Zydnar

感謝您的支持，但我已經很好地瞭解了根本無法掌握它。 – Ralphatron

您需要使用此向後兼容性：

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7)));

基本上，您需要同時使用-webkit-梯度和-webkit - 線性漸變。你可以在這裏找到更多關於漸變前綴的信息：https://github.com/CSSLint/csslint/wiki/Require-all-gradient-definitions

來源

2017-05-27 22:22:14 margarita

同樣的故事恐怕：'code'.square-brackets {padding：10px 30px; margin：auto; border：5px solid transparent; border-image：線性漸變（向右，＃92AC3B 0px，＃92AC3B 3％，#fff 3％，#fff 98％，＃92AC3B 98％，＃92AC3B 100％）; border-image：-webkit-linear-gradient（向右，＃92AC3B 0px，＃92AC3B 3％，#fff 3％，#fff 98％，＃92AC3B 98％，＃92AC3B 100％）;/* Chrome10 +，Safari5.1 + */ border-image：-webkit-gradient（向右，＃92AC3B 0px，＃92AC3B 3％，#fff 3％，#fff 98％，＃92AC3B 98％，＃92AC3B 100 ％）; border-image-slice：1; '代碼' – Ralphatron

好吧，它可以在最新的Safari瀏覽器中使用。我可以加載到我的PC上的最新的Safari是古老的。我沒有意識到蘋果公司並沒有爲Windows提供更新的版本！

來源

2017-05-29 14:44:33 Ralphatron

CSS border-image：線性漸變在Safari中不起作用

回答

相關問題