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

I have tried to implement an "envelope border" effect on my page.

我试图在我的页面上实现一个“信封边界”效果。

Basically, it's the same as this in codepen:

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

But it doesn't work in safari. And I also found that even the example of 'border-image' in w3schools seems not working. Which already consider multi-browser supported.

但它在safari中行不通。我还发现，即使在w3schools的“边界图像”(border-image)这个例子似乎也不起作用。它已经考虑了多浏览器支持。

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

In fact, I have also tried compass to generate a "multi-browser" friendly css as below:

事实上，我也尝试过用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);
 }

Does anybody have any idea about it? Many thanks.

有人知道吗?多谢。

My Safari version is: Version 10.0.1 (12602.2.14.0.7)

我的Safari版本是:版本10.0.1 (12602.2.14.7)

2 个解决方案

#1

Try

试一试

border-width: 16px;

for the .box class.

.box类。

Webkit has a bug with border-style and border-width. If no definition of border-style will show border-image. So you only need border-width

Webkit有一个带有边框样式和边框宽度的bug。如果没有边框样式的定义将显示边框图像。所以你只需要宽度。

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

  }

#2

it seems can be solved by this little trick.

似乎可以用这个小技巧来解决。

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

#1

Try

试一试

border-width: 16px;