CSS 伪类的一些阴影应用(box-shadow 与 filter:drop-shadow)

分类 css 622阅读阅读模式

前段时间的项目用到伪类三角形的阴影,想了及几种办法,考虑到对于兼容性要求不太高的项目。最后选择用 CSS3 中的 filter:drop-shadow 。发现还蛮配的。

伪类的阴影,如果考虑到兼容性最低兼容到ie9,则用 box-shadow + 图片大法做阴影的老套路较好。

尝试中,遇到一些问题,也记录下来。

 

box-shadow 与 filter:drop-shadow

阴影对比

 

相比较,相同的数值下,box-shadow 的扩散的阴影比 filter:drop-shadow 要实一些。filter:drop-shadow 相对来说会更有立体的感觉,有一点美中不足的是,filter:drop-shadow 的阴影无法进行叠加而 box-shadow 可以进行阴影的叠加,同时也不支持内投影。如下图,为 box-shadow 阴影叠加,当然,也可以内投影。

 

box-shadow 与 filter:drop-shadow

内容区透明区域对比

box-shadow 是可以对固定宽高的透明区块进行投影。

filter:drop-shadow 无法对固定宽高的透明区块进行投影,更符合现实生活,如同生活中的阳光穿透玻璃。

 

同样的,对于 border 的处理,filter:drop-shadow 也更加美妙,能全方位的对边框进行投影。

而 filter:drop-shadow 在这方面处理的,只能说,符合程序。

 

在内容区域加上实物(例如图片):

box-shadow 明显的对于 padding 区域的都是留空。

filter:drop-shadow 能忽视固定宽高的透明区块及 padding 区域,直接对实物进行投影。完美。

 

对于 margin 的负值,如下方两组图,有着明显的区别

box-shadow 无法对溢出部分进行投影

filter:drop-shadow 能跟随溢出部分,保持投影的姿势。

 

伪类处理

box-shadow 无法生成伪类部分的阴影

filter:drop-shadow 能很好的对伪类部分进行投影,处理得当,又是一个漂亮的对话框。

 

偶然发现,filter:drop-shadow 能对透明的内部部分图片进行投影,也是奇葩,如下图:

 

但是 box-shadow 就处理的有点尴尬了,不过看起来也是蛮合理。

 

完毕!

相关文章

给我留言

  • 有人回复时邮件通知我