渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image
background 的诸多属性,渐变都是可以使用的(repeat,position)
百分比: 把元素渐变方向的整体长度看成 100%
线性渐变背景
- 使用: (至少三个参数,从第二个参数开始,都是颜色)
- background-image: linear-gradient( 方向 开始颜色 结束颜色);
-
方向
- 默认值(从上到下)
background-image: linear-gradient(#000, #fff);
- to right 到右
background-image: linear-gradient(to right, #000, #fff);
background-image: linear-gradient(to left, #000, #fff);
background-image: linear-gradient(to top, #000, #fff);
background-image: linear-gradient(to bottom, #000, #fff);
- to right bottom 到右下角
background-image: linear-gradient(to right bottom, #000, #fff);
background-image: linear-gradient(to right top, #000, #fff);
background-image: linear-gradient(to left top, #000, #fff);
background-image: linear-gradient(to left bottom, #000, #fff);
- 角度 deg
background-image: linear-gradient(0deg, #000, #fff);
background-image: linear-gradient(90deg, #000, #fff);
background-image: linear-gradient(180deg, #000, #fff);
background-image: linear-gradient(270deg, #000, #fff); background-image: linear-gradient(45deg, #000, #fff);
background-image: linear-gradient(135deg, #000, #fff);
background-image: linear-gradient(225deg, #000, #fff);
background-image: linear-gradient(315deg, #000, #fff); background-image: linear-gradient(-45deg #000, #fff);
background-image: linear-gradient(-90deg #000, #fff);
- 默认值(从上到下)
-
颜色结点
background-image: linear-gradient(red %10, green 20%, blue 30%, yellow 40%); /*
从 0% 到 10% 为 red
从 10% 到 20% 为 red 到 green 的渐变
从 20% 到 30% 为 green 到 blue 的渐变
从 30% 到 40% 为 blue 到 yellow 的渐变
从 40% 到 100% 为 yellow 最后一个颜色百分比不写,默认到 100%
第一个颜色百分比不写,默认 0%
*/
- 应用: 45 度红白格(马赛克地砖)
- 明确的 颜色分割线(red 25%, white 25%)
-
多重渐变背景,以逗号隔开,适当位置设置透明颜色
- 123
重复的线性渐变 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);
- 颜色结点,除了可以写百分值,还可以写一个具体的像素值。写像素值,必须写两个值:起始和结束。
background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px; // 发廊灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #outer_box {
width: 100px;
height: 300px;
margin: 300px auto 0; overflow: hidden
} #inner_box {
width: 100px;
height: 3000px;
margin-top: -900px; background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);
} #inner_box:hover {
margin-top: 0px;
transition: 9s;
}
</style>
</head> <body> <div id="outer_box">
<div id="inner_box">
</div>
</div> </body>
</html>
- 文字光斑 动画
- 文字要设置透明 color: rgba(255, 255, 255, 0.3);
- 3
径向渐变背景 background-image: radia-gradient(形状尺寸, 开始颜色, 结束颜色);
从起点到终点,颜色从内向外渐变。
- 形状尺寸 参数
- circle 默认形状,圆形
- 当 width 相等 height 时,总是圆形
- 当 width != height 时,是椭圆
- 颜色结点
- 百分比,参照圆心到最远端的距离
-
尺寸大小
- closest-side circle 最近边
- farthest-side circle 最远边
- closest-corner 最近角
- farthest-corner 最远角
- at 设置圆心
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- 重复的径向渐变 background-image: repeating-radial-gradient(red 0%, olive 25%);
- background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);