CSS 渐变
01 CSS 渐变基础
颜色的几种表示
渐变的几种方式
02 特殊的渐变举例
水平渐变 + 垂直渐变(矩形四个点三种颜色)
线性渐变只能在一个方向上渐变,要想实现这种渐变,可以使用两个标签进行叠加:一个负责水平方向的颜色渐变,另一个通过设置透明度来实现等效的垂直方向上的颜色渐变。
<!-- html -->
<div id="app"></div>
<div id="mask"></div>
<!-- css -->
#app, #mask {
position: absolute;
top: 400px;
left: 200px;
width: 600px;
height: 200px;
border-radius: 10px;
box-shadow: 0 0 10px 10px #f5f5f5;
}
#app {
background: linear-gradient(to right, #8BBBF5, #4E7EE7);
}
#mask {
background: linear-gradient(to top, #fff 20%, transparent);
}