首先，这篇文章是本站第100篇文章。低调记念一下。
Image may be NSFW.
Clik here to view.
偶尔觉得这个纯文字的主题缺乏立体感。上次偶然碰到一个blog，标题带有阴影并且不是图片。现在终于弄明白了通过CSS代码实现文字阴影和图片阴影效果的方法。不过这些CSS代码是基于CSS3的，这就意味着只在Firefox，Chrome，Opera等浏览器有效，IE家族的浏览器，包括IE8都不支持。话说IE下可以通过叫做CSS滤镜的代码替代，我试验了一下，不甚美观。
文字阴影的代码示例如下：
text-shadow:3px 3px 2px #CCCCCC;
四个参数分别代表：X轴方向长度，Y轴方向长度，阴影模糊半径，阴影颜色
图片阴影的代码示例如下，参数同文字。
-webkit-box-shadow:2px 2px 6px #999;
-moz-box-shadow:2px 2px 6px #999;
padding:4px;
其中在图片阴影的代码末尾我加了一个包围的padding，这样的显示效果就是图片周围有一圈白边，这个纯属个人爱好。因为我认为这样白色的边跟阴影搭配起来比较好看。
通过在本站多处位置应用文字阴影和图片阴影，感觉这个简洁的主题更漂亮了，那是我一直的追求。
© 2009 Kong-Zi.com |
2009/10/27 |
永久链接 |
6 条评论
目录: 互联网 |
标签: CSS, 网站建设
