1

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

基本上，它与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 中的“border-image”示例似乎也不起作用。其中已经考虑支持多浏览器。

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

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

4

2 回答 2

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;

  }
于 2016-11-14T02:26:01.453 回答
0

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

.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-14T02:19:05.763 回答