CSS SNIPPET

  返回

实现动态阴影  视觉效果

基于元素自身的颜色创建类似于box-shadow 的阴影效果。

HTML
<div class="dynamic-shadow"></div>
CSS
.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;
}
效果演示
代码说明
  1. 元素设置position: relative ,为伪元素建立笛卡尔定位上下文。
  2. z-index: 1 建立一个新的显示栈上下文。
  3. ::after 定义一个伪元素。
  4. position: absolute 将伪元素抽离文档流,并相对于父元素进行定位。
  5. width: 100%height: 100% 设置伪元素充满父元素尺寸,使两者大小相同。
  6. background: inherit 让伪元素集成元素的线性渐变样式。
  7. top: 0.5rem 使伪元素略微向下偏离父元素。
  8. filter: blur(0.4rem) 使伪元素模糊,呈现位于下面的阴影的样子。
  9. opacity: 0.7 使伪元素部分透明。
  10. z-index: -1 将伪元素定位在父元素之后,但是在背景之前。
浏览器支持

98.5%

⚠️ 完整支持需要浏览器前缀。