css3 边框图像在 Safari 中不工作

Question

我试图在我的页面上实现 "envelope border" 效果。

基本上和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;
  }

但它在 safari 中不起作用。而且我还发现，即使是 w3schools 中 'border-image' 的示例似乎也不起作用。已经考虑支持多浏览器。

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

其实我也试过compass生成"multi-browser"友好的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)

Answer 1

看来可以通过这个小技巧来解决

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

Answer 2

尝试

border-width: 16px;

为 .box class.

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;

  }

css3 边框图像在 Safari 中不工作

css3 border-image not working in Safari

html

css

safari

compass-sass

border-image