使用 CSS 创建动态阴影

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35194{{"`使用 CSS 创建动态阴影`"}} css/colors -.-> lab-35194{{"`使用 CSS 创建动态阴影`"}} css/width_and_height -.-> lab-35194{{"`使用 CSS 创建动态阴影`"}} css/positioning -.-> lab-35194{{"`使用 CSS 创建动态阴影`"}} css/backgrounds -.-> lab-35194{{"`使用 CSS 创建动态阴影`"}} css/pseudo_elements -.-> lab-35194{{"`使用 CSS 创建动态阴影`"}} end

动态阴影

虚拟机中已经提供了 index.htmlstyle.css

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

  1. 使用 ::after 伪元素,将 position 设置为 absolute,并将 widthheight 设置为 100%,以填充父元素中的可用空间。

  2. 使用 background: inherit 继承父元素的 background

  3. 使用 top 稍微偏移伪元素。然后,使用 filter: blur() 创建阴影,并设置 opacity 使其半透明。

  4. 通过设置 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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程