如何在边框中创建径向渐变？

Question

I'm trying to accomplish the following:

Basically, this is just a block element:

<div></div>

div {
    width: 100px;
    height: 100px;
}

How would I put the radial gradient image inside the top left of the elements border?

Answer 1

You can use border-image with some radial-gradient like this:

HTML :

<div><div>

CSS :

div {
  width:200px;
  height:200px;
  background:blue;
  border-style:solid;
  border-image:-webkit-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
  border-image:-moz-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8; //Will work starting with FF29.
  border-image:radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
}

Here is the Fiddle

NOTE : Unfortunately Internet Explorer does not support this yet. The current version of Firefox (29.0.1) does have support , but all previous versions including ESRs won't render it correctly, and there is nothing on the horizon for IE, and all past versions will never support this method. If you need to support any versions of IE, you'll need to use another method, such as using a pseudo-element :before .

Answer 2

http://jsfiddle.net/ypJ8k/2/

<div class="div1">
<div class="div2"></div>
</div>

You can do it without pseudo elements like after so your gradiant will be much more accurate

the big wall of css is just the gradiant. go to http://www.colorzilla.com/gradient-editor/ , paste that gradiant (you have space before and after so you can copy it nicely from the fiddle) and modifie it at will

updated: bigger size (300x300). http://jsfiddle.net/ypJ8k/3/

Answer 3

One pseudo element should be enough with a radial gradient background from the corner and appropriate color stop.

Codepen Demo

CSS

.element {
  width:100px;
  height:100px;
  margin:50px auto;
  position: relative;
  background-color: lightblue;
}

.element:before {
  content:"";
  position: absolute;
  width:120%;
  height:120%;
  top:-20%;
  left:-20%;
  background: -webkit-radial-gradient(top left,red ,lightblue 50%, lightblue);
  background: -moz-radial-gradient(top left,red ,lightblue 50%, lightblue);
  background: radial-gradient(top left,red ,lightblue 50%, lightblue);
  z-index: -1;
}