目录
渐变（gradients）可以再两个或多个指定颜色之间显示平稳的过度。
兼容性
| IE | chrome | firefox | safari | opera |
|---|---|---|---|---|
| 10+ | 26+ | 16+ | 6.1+ | 12.1+ |
| 10.0 -webkit- | 3.6 -moz- | 5.1 -webkit- | 11.6 -0- |
线性渐变 LInear Gradients
沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一遍拉向另一边），缺省值为从上到下
语法
background: linear-gradient(direction, color-stop1, color-stop2,....)
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: linear-gradient(#f00, #00f);
background: -webkit-linear-gradient(#f00, #00f);
background: -moz-linear-gradient(#f00, #00f);
background: -o-linear-gradient(#ff0 ,#00f);
}
</style>
<body>
<div></div>
</body>
</html>
线性渐变，从左到右
随着浏览器版本不断更新，兼容性也会有所变动，并且会越来越好。如 -moz-linear-gradient 在firefox 3.6-15版本中，方向指的是目标方向，现在新版本的火狐浏览器指的是开始方向，并已兼容了渐变的标准写法，所以建议用标准写法。
语法
background: linear-gradient( to end-driection, color-stop1, color-stop2, ...);
background: -webkit-linear-gradient(begin-driection, color-stop1, color-stop2, ...);
background: -moz-linear-gradient(end-driection, color-stop1, color-stop2, ...);
background: -o-linear-gradient(end-driection, #color-stop1 ,color-stop2, ...);
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: linear-gradient( to right, #f00, #00f);
background: -webkit-linear-gradient(right, #f00, #00f);
background: -moz-linear-gradient(right, #f00, #00f);
background: -o-linear-gradient(right, #f00 ,#00f);
}
</style>
<body>
<div></div>
</body>
</html>
线性渐变，对角线
语法
background: linear-gradient( to end-level end-vertical, color-stop1, color-stop2, ...);
background: -webkit-linear-gradient(begin-level | begin-vertical, color-stop1, color-stop2, ...);
background: -moz-linear-gradient(end-level | end-vertical, color-stop1, color-stop2, ...);
background: -o-linear-gradient(end-level | end-vertical,, #color-stop1 ,color-stop2, ...);
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: linear-gradient( to right bottom, #f00, #00f);
background: -webkit-linear-gradient(left bottom, #f00, #00f);
background: -moz-linear-gradient(right bottom, #f00, #00f);
background: -o-linear-gradient(right bottom, #f00 ,#00f);
}
</style>
<body>
<div></div>
</body>
</html>
使用角度
语法: background: linear-gradinet(angel, color-stop1, color-stop2, ...)
角度说明
角度是值水平线和渐变线之间的角度，逆时针方向计算。0 将创建一个从下到上的渐变，90 则创建一个从左到右的渐变。180 则创建一个从上到下的渐变。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: linear-gradient(45deg, #f00, #00f);
}
</style>
<body>
<div></div>
</body>
</html>
颜色节点，多个颜色的控制
语法
background: linear-gradient(90deg, color1 [percentage], color2 [percentage], ...);
[percentage] 设置显示颜色的宽度。可选值，默认根据div的宽/高均分，颜色的宽度。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: linear-gradient(90deg, #f00, #f90, #ff0, #0f0, #00f);
}
</style>
<body>
<div></div>
</body>
</html>
background: linear-gradient(90deg, #f00 50%, #f90, #ff0, #0f0, #00f);
透明度渐变
background: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) );
rgba 第四个为alpha值，0为透明度0 1为透明度100%
重复线性渐变 repeat-linear-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: -webkit-repeating-linear-gradient(90deg, #f00 0%, #00f 10%);
background: -moz-repeating-linear-gradient(90deg, #f00 0%, #00f 10%);
background: -o-linear-gradient(90deg, #f00 0%, #00f 10%);
background: repeating-linear-gradient(90deg, #f00 0%, #00f 10%);
}
</style>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: -webkit-repeating-linear-gradient(90deg, #f00 0%, #00f 10%, #f00 20%);
background: -moz-repeating-linear-gradient(90deg, #f00 0%, #00f 10%, #f00 20%);
background: -o-linear-gradient(90deg, #f00 0%, #00f 10%, #f00 20%);
background: repeating-linear-gradient(90deg, #f00 0%, #00f 10%, #f00 20%);
}
</style>
<body>
<div></div>
</body>
</html>
径向渐变 radial gradients
https://www.runoob.com/cssref/func-radial-gradient.html
从起点到终点颜色从内到外进行圆形渐变，从中间向外拉伸
语法
background: radial-gradient(center, shape size, start-color, ...., last-color)
颜色节点均匀分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: radial-gradient(red, blue);
}
</style>
<body>
<div></div>
</body>
</html>
颜色节点不均匀分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: radial-gradient(red 50%, blue 80%);
}
</style>
<body>
<div></div>
</body>
</html>
是从圆心到 边缘的距离的一半为50%
设置形状
- circle 圆形
- ellipse 椭圆 默认
说明， 元素的宽/高值一样，那参数不论设置为ellipse还是circle，显示效果都为圆形。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 400px;
height: 200px;
background: radial-gradient( circle, red 50%, blue 80%);
}
</style>
<body>
<div></div>
</body>
</html>
尺寸大小关键字。
- closest-side 最近边
- farthest-side 最远边
- closest-corner 最近角
- farthest-side 最远角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
margin-bottom: 30px;
}
div {
width: 400px;
height: 200px;
}
.closest-side {
background: -webkit-radial-gradient(30% 70%, closest-side circle, red, blue);
background: -moz-radial-gradient(30% 70%, closest-side circle, red, blue);
background: -o-radial-gradinet(30% 70%, closest-side circle, red, blue);
background: radial-gradient(30% 70%, closest-side circle, red, blue);
}
.farthest-side {
background: -webkit-radial-gradient(30% 70%, farthest-side circle, red, blue);
background: -moz-radial-gradient(30% 70%, farthest-side circle, red, blue);
background: -o-radial-gradinet(30% 70%, farthest-side circle, red, blue);
background: radial-gradient(30% 70%, farthest-side circle, red, blue);
}
.closest-corner {
background: -webkit-radial-gradient(30% 70%, closest-corner circle, red, blue);
background: -moz-radial-gradient(30% 70%, closest-corner circle, red, blue);
background: -o-radial-gradinet(30% 70%, closest-corner circle, red, blue);
background: radial-gradient(30% 70%, closest-corner circle, red, blue);
}
.farthest-corner {
background: -webkit-radial-gradient(30% 70%, farthest-corner circle, red, blue);
background: -moz-radial-gradient(30% 70%, farthest-corner circle, red, blue);
background: -o-radial-gradinet(30% 70%, farthest-corner circle, red, blue);
background: radial-gradient(30% 70%, farthest-corner circle, red, blue);
}
</style>
<body>
<div class="closest-side"></div>
<div class="farthest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-corner"></div>
</body>
</html>
background: -moz-radial-gradient(30% 70%, farthest-side circle, red, blue); 可以控制圆心的位置
重复径向渐变
语法： repeating-radial-gradient
IE渐变
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=startColor, endColorstr=\'endColor\', GradientType=0 );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
margin-bottom: 30px;
}
div {
width: 400px;
height: 200px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#ff0000\', endColorstr=\'#0000ff\', GradientType=0 );
}
</style>
<body>
<div class="closest-side"></div>
</body>
</html>
背景应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
div {
width: 400px;
height: 250px;
background: #abcdef;
background-size: 50px 50px;
background-image: linear-gradient(45deg, red 25%, transparent 25%)
,linear-gradient(-45deg, red 25%, transparent 25%)
,linear-gradient(45deg, transparent 75%, red 75%)
,linear-gradient(-45deg, transparent 75%, red 75%);
}
</style>
<body>
<div class=></div>
</body>
</html>