如何在我的邊框中創建徑向漸變？

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