CSS 视觉 - 渐变阴影

2019-07-22

描述

创建基于元素本身颜色的阴影，类似于 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;
}

Demo

说明

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 使伪元素图层位于父亲元素之后，但是在背景层之前

浏览器支持

支持率：94.2%
支持情况：https://caniuse.com/#feat=css-filters
⚠️：进行所有支持时需要提供前缀

返回总目录

每天 30 秒系列之 CSS