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

Question

我正在嘗試完成以下任務：

基本上，這只是一個塊元素：

<div></div>

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

我如何將徑向漸變圖像放在元素邊框的左上方？

Answer 1

您可以使用帶有一些radial-gradient border-image ，如下所示：

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 。

Answer 2

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

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

您可以在沒有偽元素的情況下進行操作，例如after，這樣您的漸變效果將更加准確

CSS的長城只是梯度。 轉到http://www.colorzilla.com/gradient-editor/ ，粘貼該漸變（您之前和之后都有空間，以便可以從小提琴中很好地復制它）並隨意進行修改

已更新：更大尺寸（300x300）。 http://jsfiddle.net/ypJ8k/3/

Answer 3

一個偽元素應該足夠，從角落開始有一個徑向漸變背景，並具有適當的色標。

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