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

Question

我正在努力完成以下任务：

基本上，这只是一个块元素：

<div></div>

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

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

Answer 1

您可以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;
}

以下是Fiddle

注意：很遗憾，Internet Explorer尚不支持此功能。当前版本的Firefox（29.0.1）确实have support，但包括ESR在内的所有先前版本都无法正确呈现，并且IE没有任何内容，所有过去的版本都不会支持此方法。如果您需要支持任何版本的IE，则需要使用其他方法，例如使用伪元素:before。

Answer 2

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/

Answer 3

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

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