线性渐变,径向渐变-第二十二天
作者:互联网
渐变
目标:使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
语法
- 线性渐变(从一个方向到另外一个方向)
background-image:linear-gradient(transparent,rgba(0,0,0 .6))
- 径向渐变(从一个点往外扩张)
background-image:radial-gradient(transparent,rgba(0,0,0 .6))
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 3200px;
border: 2px solid orange;
/* 渐变色是添加给容器的背景图片的 */
/* 语法:background-image:linear-gradient(起始颜色,...中间色,结束颜色); */
/* 使用角度设置方向deg 默认是垂直向上,角度是正值,顺时针方向*/
background-image: linear-gradient(45deg,red,yellow,blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
标签:第二十二,linear,gradient,渐变,background,rgba,image,径向 来源: https://www.cnblogs.com/cm666/p/16184314.html