简介
在本实验中,我们将探索如何使用 CSS 创建动态阴影。你将学习如何使用 ::after
伪元素以及各种 CSS 属性,如 background
、filter
、opacity
和 z-index
,来创建一种模仿盒阴影的效果,但这种效果是基于元素本身的颜色。在本实验结束时,你将能够为你的设计增添额外的深度和立体感。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探索如何使用 CSS 创建动态阴影。你将学习如何使用 ::after
伪元素以及各种 CSS 属性,如 background
、filter
、opacity
和 z-index
,来创建一种模仿盒阴影的效果,但这种效果是基于元素本身的颜色。在本实验结束时,你将能够为你的设计增添额外的深度和立体感。
虚拟机中已经提供了 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 中练习更多实验来提升你的技能。