CSS 渐变

我要出去玩儿

已于 2023-06-19 20:37:41 修改

阅读量499

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2023-06-19 20:37:05 首次发布

本文链接：https://blog.youkuaiyun.com/mwl_learning/article/details/131294755

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);
}