IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

是时候使用filter:drop-shadow了

前端观察 2012-12-07 23:42:48 累计浏览 5,023 次
本机暂存

前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,于是写了一大坨box-shadow来实现,然后今天看到bricss说到filter:drop-shadow,豁然开朗。

具体的实现不用不细讲了,直接看代码:

box-shadow方案:

1
2
3
.box-shadow{
box-shadow: rgba(0,0,0,.5)01px5px;}

drop-shadow滤镜方案:

1
2
3
4
5
6
7
.filter-drop-shadow{
-webkit-filter: drop-shadow(01px5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(01px5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(01px5px rgba(0,0,0,.5));
-o-filter: drop-shadow(01px5px rgba(0,0,0,.5));
filter: drop-shadow(01px5px rgba(0,0,0,.5));}

效果对比:

线上demo:http://dabblet.com/gist/3820382

关于drop-shadow这个滤镜:

  • 不了解filter的同学请访问:-webkit-filter是神马?

  • chrome从21版本开始支持(现在主流版本是22),Safari 6和ios 6中Safari也都支持

  • firefox、Opera、ie继续用box-shadow吧

filter规范现在由webkit和adobe在推,firefox在跟进,ie10也支持一点点了,所以在webkit上,可以实现更好的效果,为什么不用呢?

参考:http://bricss.net/post/33158273857


同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,443)
  2. css3:box-shadow边框阴影属性值详解 (累计阅读 27,111)
  3. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,979)
  4. 各公司对前端开发的职位描述 (累计阅读 10,407)
  5. iframe大小自适应 (累计阅读 10,058)
  6. 浏览器的渲染原理简介 (累计阅读 8,377)
  7. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,358)
  8. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  9. 2010网页设计趋势 (累计阅读 7,819)
  10. Web前端工程师编程能力飞升之路 (累计阅读 7,693)