在引用的CSS3中创建渐变边框

Question

我在css3中执行div的渐变边框。到目前为止，我已经完成了我的编码

在css中

.bot-left {
  position: relative;
}
.bot-left:before, .bot-left:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;

}
.bot-left:before {
  top: -3px;
  width: 3px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(transparent, #000);
  background-image: -moz-linear-gradient(transparent, #000);
  background-image: -o-linear-gradient(transparent, #000);
}
.bot-left:after {
  right: -3px;
  height: 3px;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(left, #000, transparent);
  background-image: -moz-linear-gradient(left, #000, transparent);
  background-image: -o-linear-gradient(left, #000, transparent);
}

in html

  <div class="bot-left" style="width: 200px; height: 200px"></div>

但我仍然没有得到完全匹配作为参考。渐变边框的参考图像附有此

更新 我希望背景颜色应该是透明的。

Answer 1

我建议你使用渐变作为背景而不是边框​​图像。我建议您使用此方法的原因是因为IE10 border-image isn't supported。您可以通过使用base64编码的渐变来实现此方法以支持IE9。

现在，这里使用了两个绝对定位元素以及位于绝对位置的:before和:after伪元素。

Demo

在这里，您可以在很大程度上重构这一点，我没有这样做，以便您可以弄清楚它是如何工作的。

此外，如果您愿意，可以将其包含在position: relative;容器内，该容器的分别为z-index和.frame1类的元素设置为负2。

Demo 2

body {
    background: #000;
}

.frame1,
.frame2 {
    position: absolute;
    top: 25px;
    left: 25px;
    bottom: 25px;
    right: 25px;
}

.frame1:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    width: 1px;
}

.frame1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    height: 1px;
}

.frame2:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    width: 1px;
}

.frame2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    height: 1px;
}

Answer 2

对于年轻的浏览器，您可以使用一个渐变，框阴影和透明边框： DEMO

用于演示的CSS：

.bot-left {
  background:
    linear-gradient(
      to bottom right,
      #777,
      #555,
      #333,
      #111,
      #333,
      #555,
      #777) center;
  background-size:105% 105%;/* needs to lay under borders */
  box-sizing:border-box;/* keep borders inside width and height setted */
  border:1px transparent solid;/* background will show through */
  box-shadow:inset 0 0 0 500px black, 0 0 0 5px black;/* inset shadow will hide background gradient */
  margin:5px;/* optionnal: includes ouside box-shadow in space needed by element */
}