您的位置:首页 - 教程 - CSS - 正文
【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法,其实还存在许多不为人知的奇技淫巧。喜欢 markdown 版本的可以戳这里 。

Demo–戳我看看。

当然,值得注意的是:

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

  • 由于每个人的浏览器视口大小不一致,为了所有情况下 box-shadow 生成的阴影都能覆盖整个页面,可能需要将阴影的尺寸 spread 设置的很大。

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

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

Demo 中,有这样一个图形:

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

当所有阴影的颜色都是同色的时候,就很自然变成了一朵云朵:

当然,脑洞够大的话,更复杂一点的也是可以的,来看看下面这个图形,也是由单个标签完成:

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

嗯,当然,你问我这些图形有什么用。我觉得实用性真的不强吧,我个人而言是兴趣,从中获取到了乐趣,同时也学到了很多东西,对属性本身印象也更加深刻,遇到许多 CSS 方面的问题的时候,思路更加开阔。

更多有趣的图形,可以 戳这里 – Demo

Demo–戳我体验一下。

如果上面的几点还有用武之地,那么这个功能我觉得除了看似厉害之外真的是毫无实用之处,上面也说了,box-shadow 是比较耗性能的,因为即便是一个 100px*100px 的图形,转化之后都有 10000 重阴影,无论是对性能还是可读性而言,都是毁灭性的,但是讲真,还是挺有趣的。

box-shadow 就先说这些吧,box-shadow 肯定还要其它的一些妙用,细心之人可以继续挖掘之。

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

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

  • 另外 《CSS SECRET》(CSS揭秘)这本大作也对 filter:drop-shadow 有详细的描述,可以去看看。

     

    希望这篇文章对大家有所帮助,尤其是在对问题解决的思维层面上。

    到此本文结束,如果还有什么疑问或者建议,可以多多交流,写文章不容易,觉得不错的希望大家点个推荐。

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


    评论: