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

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> 

你可以不用伪元素等之后，让你的gradiant将更加准确

CSS的大墙只是gradiant。请去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; 
}