background: radial-gradient(circle, red, yellow, green, black);/*标准写法*/
css3 定义了渐变色的两个方法: 线性渐变与径向渐变
1.线性渐变
background: linear-gradient(#00a1d6, #fc7299);
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.demo{
width: 500px;
height: 500px;
background: -moz-linear-gradient(#00a1d6, #fc7299);/* Firefox 3.6 - 15 */
background: -o-linear-gradient(#00a1d6, #fc7299);/* Opera 11.1 - 12.0 */
background: -webkit-linear-gradient(#00a1d6, #fc7299);/* Safari 5.1 - 6.0 */
background: linear-gradient(#00a1d6, #fc7299);/*标准写法*/
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
方向默认为自上而下,你也可以设置不同的方向,比如向右 :
background: linear-gradient(to right, #00a1d6, #fc7299);
附上效果图:
除此之外还可以用百分比和角度来渐变
background: linear-gradient(135deg, blue 20%, white 50%, red 80%);
效果有点差,图我就不放了.
等等,我想到一个比较酷的主意
background-image: linear-gradient(to right, blue 33%, white 33%, white 66%, red 66%);
emmm,乳髪不能停,还不错儿,继续...
2.径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
shape为设置形状,可以设置circle 或 ellipse,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
示例:
background: radial-gradient(red, yellow, green, black);
第一次写blog,有点生疏