CSS3 box-shadow

属性如下:

box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色

网上关于这个的教程很多,随便搜搜都有,不过看过之后最好实践一下,我这里就不说教程了,贴张图看看:

box-shadow
box-shadow

提醒一下的是不能直接对图片使用inset(内阴影)效果,昨晚我在这里纠结了好久好久。

然后放上个Demo(IE就不用尝试了,嗯,有IE 9的可以看看如何。如果看到乱码,在浏览器中将编码改为utf8即可)。

最后是一点参考资料:

  1. CSS3属性box-shadow使用教程(关于多重阴影部分有误,正确用法可参考我的Demo)
  2. The ‘box-shadow’ property

61条评论

    1. @Jasoon, 用的是IE?将编码换为utf8即可

  1. 一般的box-shadow我都只會用box-shadow: X X X #000,X X X #000,X X X #000 那效果挺舒服的

        1. @小闇, 明白,你喜欢用多重阴影的

    1. @扯远了, 🙂 可以不用看懂,没事折腾而已

    1. @yetone, 编码问题,在浏览器中改为utf8即可

  2. CSS,唉。又是代码,又见代码,头疼啊。。咖啡因友情路过,欢迎回访。

  3. meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /

    1. @mice, 汗!忘记这东西了!话说,一开始没发现对你的上一条评论很是疑惑,原来还接着下文

    1. @Mucid, 这篇除非加文字,否则我还真不知道怎么用中文(翻译过来? ➡

      1. @流年, 我是说你的演示页面最好用英文,免去乱码烦恼^_^

        1. @Mucid, 汗,也没必要。忘记加编码声明了

    1. @学夫子, 我以前想加上一个图片效果,单独成功,博客失败,所以暂时先不折腾它

  4. 外观和效率上box-shadow在一些方面做的不错,不过我擦着背景为什么那么谷歌啊

评论已关闭。