在引用的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 是因为IE10 不支持.您可以通过使用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;
}