【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

box-shadow 在前端的 CSS 编写工做想必十分常见。可是 box-shadow 除去它的常规用法，其实还存在许多鲜为人知的奇技淫巧。

喜欢 markdown 版本的能够戳这里 。

 

box-shadow 常规用法

说到 box-shadow ，首先想到的必然是它可以生成阴影，因此称之为 shaodow ，简单看看它的语法：

基础属性语法

box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

像这样 box-shadow: 10px 10px 5px #888888; 除此以外，咱们要知道，box-shadow 是分外 shadow 和内 shadow 的，内阴影便是在属性上添加 inset 。

OK，本文已经假设你对 box-shadow 有了必定的了解，在此基础上，咱们再看看 box-shadow 有什么其它妙用。

 

box-shadow 模拟多边框

一般而言，咱们会给许多元素添加边框 border，可是当若是须要多重边框，这个时候，因为 border 单重的限制，box-shadow 就能够闪亮登场了。咱们能够轻松的使用外阴影或者内阴影来模拟边框效果。

能够看到，由内至外，这里利用 box-shadow ，设置了白色、黑色、灰色三层边框及最外层带模糊的阴影。

box-shadow 有一个参数是设置 blur 的，便是模糊的距离，在上面的例子中，便是第二重阴影 0 0 0 10px #333, 中的第三个 0 ，当 blur 的值为 0 ，那么阴影自己是不会模糊的，那么就很容易模拟出边框的效果。

并且，元素能够设置多重阴影，而且它们存在层叠关系，离 box-shadow 最近设置的层叠优先级最高，依次递减，这个对照代码很好理解。

固然，值得注意的是：

• 阴影并非边框，它们并不占有实际的空间，也不能归属于 box-sizing 的范围。不过，你能够经过使用内边距或外边距（取决于阴影是内部的仍是外部的）占据额外的空间来模拟。

• 上述示例模拟的边框是位于元素外部的。它不能捕获相似悬停和点击的鼠标事件。若是事件很重要，那么能够经过添加 inset 关键字让阴影出如今元素的内部。注意，你可能须要添加额外的内边距来扩充空间。

 

box-shadow 模拟半透明遮罩层

不少时候，咱们须要用到相似下图这样的遮罩层，经过半透明遮罩层把背景调暗，凸显某些 UI 组件，提高用户体验。

常规的作法一般都会用到一个额外的元素，用做遮罩层，至少也是一个伪元素， before 或者 after。

不考虑低版本的兼容性的话，其实用 box-shadow 也能够模拟遮罩层这种效果。

这里还有一个例子，hover 时利用配合 scale 放大元素， box-shadow 产生遮罩，聚焦用户关注视野。

Demo–戳我看看。

固然，值得注意的是：

• 使用这种方法不可避免的须要考虑兼容性，IE9+、Firefox 四、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

• 因为每一个人的浏览器视口大小不一致，为了全部状况下 box-shadow 生成的阴影都能覆盖整个页面，可能须要将阴影的尺寸 spread 设置的很大。

• 若是你真的想尝试这个方法，box-shadow 从性能角度而言属于 耗性能样式，不一样样式在消耗性能方面是不一样的，box-shadow 从渲染角度来说十分耗性能，缘由就是与其余样式相比，它们的绘制代码执行时间过长。虽然有 GPU 的 3D 加速，可是具体使用的时候仍是值得斟酌考虑。不过你要知道，没有不变的事情，在今天性能不好的样式，可能明天就被优化，而且浏览器之间也存在差别。

下面再讲讲多重 box-shadow 能干啥：

 

多重 box-shadow 之简单图形

从本质上讲，box-shadow 是将自身投影到另外一个地方，在不少状况下，咱们是能够利用 box-shadow 来复制自身的！

利用这个特性，咱们能够用 box-shadow 制做一些简单的图形，在个人单标签图形 Demo 中，有这样一个图形：

其中的云层，就是利用了 多重box-shaodw 在一个伪元素内生成的。下面我利用不一样的颜色，直观的表达一下如何利用 box-shadow 绘制这个图形：

当全部阴影的颜色都是同色的时候，就很天然变成了一朵云朵：

固然，脑洞够大的话，更复杂一点的也是能够的，来看看下面这个图形，也是由单个标签完成：

其中比较困难的是其中环绕字母 e 的那个圆以及那个切入的不规则角，看看用阴影怎么把它作出来，利用了两重 box-shadow：

嗯，固然，你问我这些图形有什么用。我以为实用性真的不强吧，我我的而言是兴趣，从中获取到了乐趣，同时也学到了不少东西，对属性自己印象也更加深入，遇到许多 CSS 方面的问题的时候，思路更加开阔。

更多有趣的图形，能够 戳这里 – Demo

 

多重 box-shadow 实现立体感

这种方法运用在 text-shadow 上一样能够，能够实现文字的立体感。

运用多重 box-shadow ，不断偏移 1px ，就能够产生十分立体的感受。

运用在按钮：

运用在文字：

 

多重 box-shadow 实现任意图片转换

嗯，讲真~~ 我以为这个是最有趣的。

多重 box-shadow 还能作什么呢。因为 box-shadow 的多重性，也就是 不管多少重均可以，那么理论上任意一张图片，每个像素点均可以由一重 1px*1px 的 box-shadow 来表示。

为了完成这个任务， canvas 恰好提供了一个方法 CanvasRenderingContext2D.getImageData 能够获取到图片每个像素点的 rgba 值，那么图片转为一个彻底由 box-shadow 表示的图片是彻底可行的。

为此，我倒腾了许久，写了这么一个小插件，能够将任意图片转化为由 box-shadow 表示的单个 div 标签。

Demo–戳我体验一下。

若是上面的几点还有用武之地，那么这个功能我以为除了看似厉害以外真的是毫无实用之处，上面也说了，box-shadow 是比较耗性能的，由于即使是一个 100px*100px 的图形，转化以后都有 10000 重阴影，不管是对性能仍是可读性而言，都是毁灭性的，可是讲真，仍是挺有趣的。

box-shadow 就先说这些吧，box-shadow 确定还要其它的一些妙用，细心之人能够继续挖掘之。

 

filter:drop-shadow

其实说到 box-shadow，就不得不提到另外一个和它极为类似的 CSS3 新属性 filter:drop-shadow，filter 便是 CSS 滤镜，能够在元素呈现以前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜经常使用于调整图像、背景、边框的渲染。

固然这里咱们只说 filter:drop-shadow。

filter:drop-shadow 也很好玩，本想继续长篇大论讨论下去，无奈发现 张鑫旭大神两篇文章已经把我想说的都囊括了，前人栽树，后人乘凉，我也就再也不献丑了。

两篇很是值得一读的文章：

• CSS3 filter:drop-shadow滤镜与box-shadow区别应用

• PNG格式小图标的CSS任意颜色赋色技术

另外 《CSS SECRET》（CSS揭秘）这本大做也对 filter:drop-shadow 有详细的描述，能够去看看。

 

但愿这篇文章对你们有所帮助，尤为是在对问题解决的思惟层面上。

到此本文结束，若是还有什么疑问或者建议，能够多多交流，写文章不容易，以为不错的但愿你们点个推荐。

原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。