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

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

首先,这篇文章是本站第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,这样的显示效果就是图片周围有一圈白边,这个纯属个人爱好。因为我认为这样白色的边跟阴影搭配起来比较好看。

通过在本站多处位置应用文字阴影和图片阴影,感觉这个简洁的主题更漂亮了,那是我一直的追求。


Tags: ,

© 声明:除特别注明,Kong-Zi.com 博客文章均为原创,转载时请以链接形式标明本文地址。
《text-shadow文字阴影和图片阴影》永久链接地址:http://www.kong-zi.com/post/1139.html
0




6 Comments

  1. Bodhi

    2009年10月27日 @ 19:18

    text-shadow/Chrome 应该是可以的,起码我这里写的代码都没问题的啊。

    [回复]

    Simon Kong 回复:


    谢谢提醒,现在可以了。

    [回复]

  2. 市场营销学

    2009年11月04日 @ 13:04

    说得太对了..

    [回复]

  3. sync

    2009年11月09日 @ 18:33

    字体小一点的话效果会更好一点

    [回复]

    Simon Kong 回复:


    @sync, 正文还是标题?

    [回复]

  4. Sync

    2009年11月12日 @ 10:38

    标题,有点太大了,阴影看起来不太平滑,小一点可能会好一点~

    [回复]

Leave a comment

XHTML: Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>