html - css3 边框图像在 Safari 中不起作用

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 中的“边框图像”示例似乎也不起作用。已经考虑支持多浏览器。

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

事实上，我也尝试过使用 compass 生成一个“多浏览器”友好的 css，如下所示:

compass :

$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)

Answer 1

尝试

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;

  }

---