2

我正在尝试完成以下任务:

带有径向渐变的盒子

基本上,这只是一个块元素:

<div></div>

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

如何将径向渐变图像放在元素边框的左上角?

4

3 回答 3

3

你可以像这样border-image使用radial-gradient

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;
}

这是小提琴

注意:不幸的是 Internet Explorer 尚不支持此功能。当前版本的 Firefox (29.0.1) 确实支持,但是包括 ESR 在内的所有以前的版本都无法正确呈现它,并且 IE 也没有任何东西,所有过去的版本都不会支持这种方法。如果您需要支持任何版本的 IE,则需要使用另一种方法,例如使用伪元素:before

于 2014-03-26T16:56:50.080 回答
1

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

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

你可以在没有伪元素的情况下做到这一点,这样你的梯度会更准确

CSS的大墙只是渐变。去http://www.colorzilla.com/gradient-editor/,粘贴那个渐变(你之前和之后都有空间,所以你可以从小提琴中很好地复制它)并随意修改它

更新:更大的尺寸(300x300)。http://jsfiddle.net/ypJ8k/3/

于 2014-03-26T16:45:53.923 回答
1

一个伪元素应该就足够了,从角落有一个径向渐变背景和适当的颜色停止。

Codepen 演示

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;
}
于 2014-03-26T16:52:55.473 回答