我試圖在我的頁面上實現「信封邊框」效果。css3邊框圖像在Safari中不工作
基本上,它是相同的,因爲這在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;
}
但它不能在野生動物園的工作。而且我還發現,即使w3schools中的「邊框圖像」的例子似乎也不起作用。已經考慮支持多瀏覽器。
http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3
其實,我也曾嘗試指南針生成一個 「多瀏覽器的」 友好的CSS如下:
羅盤:
$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);
}
有人有任何想法嗎?非常感謝。
我的Safari瀏覽器版本爲:10.0.1版(12602.2.14.0.7)
謝謝,它完美的作品。 –