径向渐变
径向渐变使用 radial-gradient 函数语法。
这个语法和线性渐变很类似， 可以指定渐变结束时的形状 以及它的大小。
默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。
下面代码演示径向渐变的用法：
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>径向渐变</
title
>
<
style
type
=
"text/css"
>
body{
padding:20px;
}
div{color:#fff;}
div.one{
width:150px;
height:150px;
border:1px solid #000;
background: radial-gradient(red, blue, rgb(30, 144, 255));
}
div.two{
width:150px;
height:150px;
border:1px solid #000;
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
}
div.three{
width:150px;
height:150px;
border:1px solid #000;
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
}
div.four{
width:150px;
height:150px;
border:1px solid #000;
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
</
style
>
</
head
>
<
body
>
<
h1
>软件开发，成就梦想</
h1
>
<
div
class
=
"one"
></
div
>
<
div
class
=
"two"
></
div
>
<
div
class
=
"three"
></
div
>
<
div
class
=
"four"
></
div
>
</
body
>
</
html
>
工作中可以使用渐变生成工具，提高工作效率。