- 颜色渐变 gradient
分为线性渐变 linear 和径向渐变 radial
线性渐变:
参数:(第一个参数省略时,默认为“180deg”,等同于“to bottom”)
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
代码示例:background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
效果图:
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<p>右下角向左上角的线性渐变背景</p>
</body>
</html>