在引用的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

我建議你使用漸變作為背景而不是邊框​​圖像。 我建議你使用這種方法的原因是因為IE10 不支持 border-image 。 您可以通過使用base64編碼的漸變來實現此方法以支持IE9。

現在，這里使用兩個絕對定位元素:before和:after偽元素，它們位於絕對位置。

演示

在這里，您可以在很大程度上重構這一點，我沒有這樣做，以便您可以弄清楚它是如何工作的。

此外，如果你願意，你可以將它包裝在一個position: relative; 在具有.frame1和2類的元素上設置負z-index容器。

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