渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景
分类
- 线性渐变
- 经向渐变
线性渐变
属性是
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值
渐变方向:可选
to 方向名词
角度度数
终点位置:可选
百分比
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变-线性</title>
<style>
div{
width: 200px;
height: 200px;
background-color: green;
/* 渐变由 红色 变成 绿色,方向是默认从上倒下。 */
background-image: linear-gradient(
red,
green
);
/* 这个是从左向右,有红色变成绿色 */
background-image: linear-gradient(
to right,
red,
green
);
/* 设置45度的角, */
background-image: linear-gradient(
45deg,
red,
green
);
/* 也可以设置备份比,红色占的比例。 */
background-image: linear-gradient(
red 80%,
green
);
/*
transparent 透明色
rgba(0,0,0,0.6) 黑色透明度60%
这个的作用是从上而下,透明度渐变成黑色透明度0.6
*/
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.6)
);
}
</style>
</head>
<body>
<div></div>
</body>
经向渐变
作用:给按钮添加高光效果
属性
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置
);
取值
半径可以是两条,为椭圆
圆心位置取值:像素单位/百分比/方位名词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at center center,
red,
pink
);
background-image: radial-gradient(
50px 20px at center center,
red,
pink
);
background-image: radial-gradient(
50px 20px at 50px 30px,
red,
pink 50%
);
}
/* 按钮设置径向渐变 */
button{
width: 100px;
height: 40px;
background-color: green;
border: 0;
border-radius: 5px;
color: #fff;
/* 由透明度20%的黑色渐渐变成透明色 */
background-image: radial-gradient(
30px at 30px 20px,
rgba(255,255,255,0.2),
transparent
);
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
</body>
</html>