语法：



text-shadow ： none | <length> none | [<shadow>, ] * <shadow>

相关属性


取值：



<color> ： 指定颜色。 <length> 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。


说明：



设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow 

box-shadow，

它必须应用于文本，并它们有相同的四个参数：

x-offset              　　水平位移

　　y-offest              　　垂直位移

　　blur                  　　  模糊值

　　color of shadow         阴影颜色




h1 
    {
    

 　　text-shadow
    :
     0 1px 0 #fff
    ;
     

 　　color
    :
     #292929
    ;
    


    }



下面看实例：



<!DOCTYPE html>
 <html>
 <head>
 <title>text-shadow</title>
 <meta charset="utf-8" />
 <style>
 body 
    {
    
 　　background-color
    :
    #666
    ;
     

    }
    
 h1 
    {
    
 　　text-shadow
    :
    0 1px 0 #fff
    ;
    
 　　color
    :
    #292929
    ;
    
 　　font
    :
    bold 90px/100% Arial
    ;
    
 　　padding
    :
    50px
    ;
    

    }
    
 </style>
 </head>
 <body>

 <h1>Hello,World!</h1>

 </body>
 </html>


运行效果（Chrome）：



CSS3属性之text-shadow和box-shadow（立体效果的实现）_CSS3属性



下面用text-shadow实现空心字效果:



h1 
    {
    
 　　text-shadow
    :
    0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000
    ;
    
 　　color
    :
    #fff
    ;
    
 　　font
    :
    bold 90px/100% Arial
    ;
    

    }


运行效果（Chrome）：



CSS3属性之text-shadow和box-shadow（立体效果的实现）_html_02






--------------------------------------------------------------------------------------------------------------------------------



实例

向 div 元素添加 box-shadow：


div
{
box-shadow: 10px 10px 5px #888888;
}


​​亲自试一试​​



浏览器支持

IE

Firefox

Chrome

Safari

Opera

 

 

 

 

 

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。



定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：

none

继承性：

no

版本：

CSS3

JavaScript 语法：

object.style.boxShadow="10px 10px 5px #888888"



语法

box-shadow: h-shadow v-shadow blur spread color

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值

描述

测试

h-shadow

必需。水平阴影的位置。允许负值。

​​测试​​

v-shadow

必需。垂直阴影的位置。允许负值。

​​测试​​

blur

可选。模糊距离。

​​测试​​

spread

可选。阴影的尺寸。

​​测试​​

color

可选。阴影的颜色。请参阅 CSS 颜色值。

​​测试​​

inset

可选。将外部阴影 (outset) 改为内部阴影。

​​测试​​