🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

5 评论
xuCesar • 2019-07-22
回复 删除

很棒~

jinjianh • 2019-07-22
回复 删除

v姐出一期grid的哎

Vanessa • 2019-07-22
回复 删除

CSS 布局 - 网格居中 这个算么?

2501224066 • 2019-07-22
回复 删除

讲讲毛玻璃啊

Vanessa • 2019-07-22
回复 删除

收到