Question

我试图在我的网页上实现“信封边框”效果。

基本上，它与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

事实上，我也尝试过罗盘来生成一个“多浏览器”友好的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

尝试

@media screen and (max-height: 300px) {
    #instructions button {
    z-index: -1;
    }

}

表示border-width: 16px;类。

Webkit存在.box和border-style的错误。如果border-width的定义不会显示border-style。所以你只需要border-image

border-width

Answer 2

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

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

css3 border-image在Safari中不起作用

2 个答案: