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

Question

I am doing a gradient border of a div in css3. So far now I have done my coding like this

in 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>

But still I am not getting the exact match as reference. The reference image for the gradient border is attached with this

UPDATE I want the background-color should be transparent.

Answer 1

I would recommend you to use the gradients as background instead of border images. The reason I am suggesting you to use this method is because border-image isn't supported by IE10. Where as you can implement this method to support IE9 as well, by using base64 encoded gradients.

Now, here am using two absolute positioned elements along with :before and :after pseudo elements which are positioned absolute.

Demo

Here, you can refactor this to a great extent, I've not done that so that you can figure out how this works.

Also, if you want, you can wrap this inside a position: relative; container with a negative z-index set on the elements having class of .frame1 and 2 respectively.

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

For younger browser , you may use one single gradient, box-shadow and transparent border : DEMO

CSS used for demo:

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