CSS 动态阴影 | 网页设计教程

简介

在本实验中，我们将探索如何使用 CSS 创建动态阴影。你将学习如何使用 ::after 伪元素以及各种 CSS 属性，如 background、filter、opacity 和 z-index，来创建一种模仿盒阴影的效果，但这种效果是基于元素本身的颜色。在本实验结束时，你将能够为你的设计增添额外的深度和立体感。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 94%。获得了学习者 100% 的好评率。

动态阴影

虚拟机中已经提供了 index.html 和 style.css。

要创建基于元素颜色的阴影，请执行以下步骤：

使用 ::after 伪元素，将 position 设置为 absolute，并将 width 和 height 设置为 100%，以填充父元素中的可用空间。
使用 background: inherit 继承父元素的 background。
使用 top 稍微偏移伪元素。然后，使用 filter: blur() 创建阴影，并设置 opacity 使其半透明。
通过设置 z-index: -1 将伪元素定位在其父元素后面。在父元素上设置 z-index: 1。

以下是一个 HTML 和 CSS 代码示例：

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了动态阴影实验。你可以在 LabEx 中练习更多实验来提升你的技能。