css底部渐变

最新推荐文章于 2024-01-23 16:37:23 发布

yj_xy

最新推荐文章于 2024-01-23 16:37:23 发布

阅读量412

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/yj_xy/article/details/129882116

版权

在这里插入图片描述

.right-box {
  height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);

}

第一个参数是一个可选值，它控制渐变的方向。这可以使用一些关键字(例如
to left top 或 to right)或旋转 Angular 来描述。在 CSS 中用来表示 angles 的单位可以是 deg(度数)、turn、rad(弧度)或 grad(梯度).如果没有提供，默认方向是从上到下。请注意，我没有包含此内容，因此使用了默认方向。
其余参数是颜色列表和可选值，用于指示颜色应在何处开始和停止，称为color stops。您可以根据需要使用任意数量的色标。您拥有的色标越多，每个“色带”就会变得越窄。没有任何“提示”或起点和终点的颜色停止列表将从一种颜色平滑过渡到另一种颜色，因为它将统一应用颜色起点和终点。如果您想要从一种颜色突然过渡到另一种颜色，您可以将第一种颜色的停止百分比设置为与下一种颜色的起始百分比相同的值。一些聪明和有艺术天赋的人生产amazing patterns通过利用
background-image 属性堆叠多个图像的能力来使用 CSS 渐变(渐变被视为背景图像而不是背景颜色)!