如何给网页文字设置阴影

当前位置：首页 > 个人日志

如何给网页文字设置阴影

分类:个人日志来源:原创时间:2012-04-26 21:41:57

在css2中我们无法给网页文字设置阴影，要实现阴影文字效果要么使用多层div，要么把文字做成图片。这样做比较麻烦，同时也不太利于SEO，还好在CSS3中我们可以使用text-shadow属性给文字设置阴影。下面雷纯用一段代码对该属性的使用进行说明：

本属性有4个值（使用空格隔开），前两个分别表示水平、垂直方向的位移距离（可设置为负数），第三个表示阴影的模糊半径（0及以下的值均表示无模糊），最后一个表示阴影的颜色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>CSS3中使用text-shadow给网页文字设置阴影</title>
        <style type="text/css">
                div{text-shadow:2px 2px 3px #666666;}
        </style>
    </head>

    <body>
        <div>这是使用CSS3给网页文字设置的阴影效果</div>
    </body>
</html>

注意：使用本属性时需要比较高版本的浏览器，特别是ie，ie8之前的版本都不支持，所以为了保证兼容主流浏览器，不建议使用该属性。

加入收藏 | 浏览(7458)

上一篇：8个PS设计技巧让图片获得新生
下一篇：PHP如何设置每隔一段时间自动执行某段代码

iLeichun

如何给网页文字设置阴影