按照引用在 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);
}

在html中

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

但我仍然没有得到完全匹配的参考。渐变边框的参考图附上这个

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

Answer 1

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

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

Demo

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

此外，如果您愿意，可以将其包装在 position: relative; 容器中，并在具有 .frame1 和 2 类的元素上分别设置一个负的 z-index。

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 */
}