Safariでcss3 border-imageが機能しない

Question

私のページに「封筒の境界」効果を実装しようとしました。

基本的に、それはcodepenでこれと同じです：

http://codepen.io/danichk/pen/KdorYJ

---

.box { 
    padding: 1em; 
    border: 16px solid transparent;<br> 
    border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    max-width: 20em; 
    font: 100%/1.6 Baskerville, Palatino, serif; 
    } 

---

しかし、それはSafariで動作しません。そして、私はまた、w3schoolsの 'border-image'の例さえも機能していないようだと分かりました。すでに複数のブラウザをサポートしていると考えています。

コンパス：

$envelop-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
.envelope-border { 
    padding: 1em; 
    border: 16px solid transparent; 
    @include border-image($value: $envelop-border-image); 
} 

CSS

.envelope-border { 
    padding: 1em; 
    border: 16px solid transparent; 
    -moz-border-image: 16 -moz-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    -moz-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    -o-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    -webkit-border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    -webkit-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    border-image: 16 -moz-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
} 

http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3

は実際に、私はまた、以下のように優しいCSS "マルチブラウザ" を生成するためにコンパスを試してみました

誰もそれについて考えていますか？どうもありがとう。

私のSafariのバージョンは次のとおりです。バージョン10.0.1（12602.2.14.0.7）

Answer 1

.boxクラスの

border-width: 16px; 

を試してみてください。

ウェブキットにはとborder-widthというバグがあります。 border-styleの定義にborder-imageと表示されない場合だから、あなただけborder-width

.box { 
    padding: 1em; 
    border-width: 16px; 
    border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
    max-width: 20em; 
    font: 100%/1.6 Baskerville, Palatino, serif; 

    } 

---

Answer 2

この小さなトリックによって解決することができるようです。

.envelope-border { 
    padding: 0; 
    border: 16px solid transparent; 
    -webkit-border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); 
} 

.content { 
    background: white; 
    padding: 1em; 
} 

HTML

<div class="envelope-border"> 
    <div class="content"><div> 
</div>