标签:CSS

text-shadow文字阴影和图片阴影

on 2009年10月27日 by Simon Kong in 互联网, 评论 (6)

首先,这篇文章是本站第100篇文章。低调记念一下。

偶尔觉得这个纯文字的主题缺乏立体感。上次偶然碰到一个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,这样的显示效果就是图片...

阅读全文 »