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

《CSS3 box-shadow》有61个想法

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

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

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

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

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

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

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

评论已关闭。