时间戳

首页 > 解决方案 > 如何创建特定的css滚动阴影？

css - 如何创建特定的css滚动阴影？

问题描述

实际上，我正在对 CSS 进行一些改进，我需要一些特定操作的帮助。

我有这个在滚动上呈现阴影的 CSS 代码：

.scrollGradient {
    background: linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(186, 186, 186, 0.5), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(186, 186, 186, 0.5), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
}

结果：

在此处输入图像描述

实际上，我希望顶部阴影是这样的： 在此处输入图像描述

你能给我一些帮助吗？

此致。

标签： css

解决方案

在您现有的代码中，您正在设置元素的背景。

你需要的是box-shadow.

如果您不想手动生成，有很多像这样的在线工具可以生成。box-shadow

如果同一元素需要多个阴影，可以用逗号分隔它们，请查看此答案。

推荐阅读