线性渐变:
CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient(渐变方向,色彩1,位置1,色彩2,位置2...)
对于线性渐变的方向,只要设置起点即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度来表示,
例如45o表示左下到右上,-45o表示左上到右下。 角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg
IE10以下的浏览器不支持此语法, 建议使用chrome浏览器或其他浏览器来浏览下面的范例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 800px;
height: 300px;
margin: 0 auto;
border: 1px solid #000;
/*线性渐变*/
/*background-image: linear-gradient(方向(从上到下),颜色1,颜色2,颜色3····);*/
/*background-image: linear-gradient(to right bottom,red,blue);*/
/*background-image: linear-gradient(45deg,red,blue,pink,green,orange);*/
/*复杂演示 color1 stop,color2 stop,*/
background-image: linear-gradient(90deg,red 50%,blue 90%,pink,green,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
/*由中心向四周渐变*/
background-image: radial-gradient(blue 100px,red);
background-image: radial-gradient(orange,yellow,#fff,transparent);
}
</style>
</head>
<body>
<div></div>
</body>
</html>重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 100px auto;
border-radius: 50%;
border: 1px solid red;
background-image: repeating-radial-gradient(#fff 0px,#fff 10px,#000 10px,#000 20px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>我们可以使用渐变工具来生成gradient语法
Ultimate CSS Gradient Generator
网址：http://www.colorzilla.com/gradient-editor/
Orientation: 渐变方向