我们先直接看Apple Music上面的效果

下面的图片跟设计引用自 Apple Music，我只是引用示例，如果觉得侵权了，请联系我删掉。

如上图的 Album 部分，仔细观察可以看出 drop shadow 是根据Box容器的内容去渲染的，给人一种通透的效果。当然，这里并不明显，我用 Sketch 模拟了一下，可以更好的展示这种效果，
废话不多说直接上图

素材图片来源网络搜索，仅用于示例

嗯，是不是看起来，不太难？
一眼看下去，也就复制一个元素然后，放下面，再模糊。
随便写个 -webkit-filter:blur(…px) 大概就完事了不是吗？
话是这么说，但只是这样，是不能满足我们的野心的！

那么我们要实现什么效果呢：

• 投影模糊

• 投影跟随内容的改变而改变 ，并且模糊

• 不克隆多一个DOM元素

• 不占用HTML的高宽计算(例如 padding ，margin 会涉及高宽计算， box-shadow不会)

• 高性能（我记得若干年前有人为了模拟iOS工具栏那种模糊背景的效果，把整个DOM元素都克隆一份然后滚动，性能简直惨不忍睹）

那么开始整理我们的思路

• 需要一个盒子容器

• 需要一个能复制这个容器跟容器内容的CSS样式

• 需要模糊

容器这个概念容易理解，随意写一个高宽的 DIV 么好了。
大概样式如下：

问题在下面两个需求。

这时候我们脑海中很容易就能想到3个属性满足上面这两条：

.css-a {-webkit-box-reflect: below }
.css-b {-webkit-filter: blur(6px) }
.css-c {-webkit-backdrop-filter: blur(6px) }

关于这几个属性的具体情况，请自行搜索资料复习。
这里我们选择box-reflect + filter:blur(…) 这个两个属性属性来完成这个效果。

我在容器插入一个视频来做Demo. 加入 box-reflect 之后效果如下：

好像感觉不对啊，直接翻转过来一个镜像。
莫慌！
box-reflect还有很多参数可以配置：[ above | below | right | left ] <length> <image>
这是一个简写配置，我怕你们看不明白，我写个例子：

.css-demo {-webkit-box-reflect: below -15px url('../img/mask.png') }

 

• 第一个参数是 倒影的方向 (上，下，左，右)

• 第二个参数是 距离实体元素的距离（可以是正负值，我这里用了负值）

• 第三个是一个用于倒影的遮罩（很可惜这个遮罩不支持Muti-images 、定位、什么的）

为了让倒影更好看，这里用了一张 mask.png 的图片做遮罩，我们可以打开尘封在角落的Photoshop搞一搞。

然后链接上去，如果没有意外你会看到这个样子：

到这里，我相信有经验的人都知道我接下来要干嘛了。

那么接下来，我要就要开始模糊这个投影。

box-reflect是没有模糊的属性的。我本来尝试过把 用来 遮罩的 png 替换成 svg 并且在 svg 里面添加了模糊的 filter， 结果还是失败。 证明这个遮罩的图片，它就只能是一张代表alpha的图片（废话）， 但是你不试试看，你怎么知道不行，对不对？

这个时候，就要祭出 iOS9／Safari9 之后新的一个私有属性 -webkit-backdrop-filter

然后思路就很简单了：

• 容器不能Overflow : hidden

• 创造一个伪类来套用背景模糊样式

.demo-view:after {
 display: block;
 content: ‘ ‘;
 width: 100%;
 height: 90px;
 position: absolute;
 left: 0;
 top: 100%;
 background-color: transparent;
 -webkit-backdrop-filter: blur(12px);
}

这样，就完了。核心CSS也就2句

• -webkit-box-reflect: below -15px url(‘../img/mask.png’)

• -webkit-backdrop-filter: blur(12px);

实际效果请看视频：

这里有几个问题要声明：

这效果兼容 ：

• mac OS 的Safari9 以上

• iOS 9 以上

不兼容：

• 任何平台的Chrome不支持

• 任何平台的FireFox不支持

• 任何平台的IE不支持

那么，这么多不兼容，这效果有什么意义？

这里我要说一下。

• 任何人都有权利追求美好的事物

• 拥有高端设备／系统的人有且必须有权力享受到更好的效果

• iOS平台严格的审核制度／新系统高占比，放心用。

安卓？

Sorry 平台太乱我已无力。

题外话

站酷你们的编辑器有点老。我记得前两年就发过建议提供codepen这类代码展示接入。希望站酷越来越好。

关于转载

发表在站酷的文章目前不希望被转载， 但是有些人不打招呼就转的我只能问问我们公司法务部门意见了。

---

我叫Jay
目前就职上海沪江 UED部门 一个小前端，
平时没事喜欢写写文章，有兴趣的人去关注 《沪江UED》公众号，
这里有一群热爱设计，热爱分享的小伙伴
我在站酷上也偶尔发表文章（虽然距离上一次已经好几年），毕竟站酷的编辑器会过滤掉很多CSS对我造成一定的编写难度。