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を使用できます。現在、すべてのブラウザでサポートされています。コンパイルを使用すると、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-bracket [ パディング：10px 30px; margin：auto; ボーダー：5ピクセル透明で透明。 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 ％）; ボーダー画像スライス：1; } 'code' – Ralphatron

これは最新のSafariブラウザで動作します。私のPCにロードできる最新のSafariは古くからある。私は、AppleがWindows用の新しいバージョンを提供していないことに気付かなかった！

出典

2017-05-29 14:44:33 Ralphatron

CSS border-image：Safariで直線勾配が機能しない

答えて

関連する問題