1、线性渐变:
效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
section{
width: 500px;
height: 300px;
background:linear-gradient(to right,red,yellow);
margin: 0 auto;
}
div{
width: 500px;
height: 300px;
/* 一定要去掉to */
background:-webkit-linear-gradient(left,yellow,green);
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<section>
</section>
<div >
</div>
</body>
</html>
示例3:使用角度渐变
div{backgroud:linear-gradient(10deg,red,blue)}角度是指水平线和渐进线之间的角度,逆时针方向计算。换句话说,0deg将创建一个从下到上的渐变,90deg将创建一个从左道右的渐变。
但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧标准,即0deg将创建一个从左道右的渐变,90deg将创建一个从
下到上的渐变。换算公式90-x=y其中x为标准角度,y为非标准角度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
section{
width: 500px;
height: 300px;
background:linear-gradient(50deg,red,yellow);
margin: 0 auto;
}
div{
width: 500px;
height: 300px;
/* 一定要去掉to */
background:-webkit-linear-gradient(40deg,yellow,green);
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<section>
</section>
<div >
</div>
</body>
</html>
2、径向渐变:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
section{
width: 500px;
height: 300px;
margin: 50px auto;
/* background: -webkit-radial-gradient(center center,red,yellow,green); */
/* background: -webkit-radial-gradient(left center,red,yellow,green); */
/* background: -webkit-radial-gradient(10px 50px,red,yellow,green); */
/* background: -webkit-radial-gradient(center,circle,red,yellow,green); */
background: -webkit-radial-gradient(100px 50px,closest-side,red,yellow,green);
}
</style>
</head>
<body>
<section></section>
</body>
</html>
3、重复渐变
<!DOCTYPE html>
<html>
<!-- 线性渐变和径向渐变都有重复渐变 -->
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
section{
width: 300px;
height: 500px;
margin: 0 auto;
/* background: -webkit-repeating-linear-gradient(top,red,orange 5%,green 10%); */
/* background: -webkit-repeating-radial-gradient(top,red,orange 5%,green 10%); */
background: -webkit-repeating-radial-gradient(center,red,orange 5%,green 10%);
}
</style>
</head>
<body>
<section></section>
</body>
</html>