css3邊框圖像在Safari中不工作

我試圖在我的頁面上實現「信封邊框」效果。css3邊框圖像在Safari中不工作

基本上，它是相同的，因爲這在codepen：

.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）

來源

2016-11-14 Martin Ma

嘗試

border-width: 16px;

爲.box類。

Webkit有一個錯誤border-style和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; 

    }

來源

2016-11-14 02:26:01 hoangkianh

謝謝，它完美的作品。 –

似乎可以用這個小動作來解決。

.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>

來源

2016-11-14 02:19:05

css3邊框圖像在Safari中不工作

回答

相關問題