text-shadow 详解及示例

text-shadow  [tɛkst] - [ˈʃædoʊ]

 

定义：

text-shadow: none | <shadow> [,<shadow>]*

<shadow><length>{2,3} && color

• <length>--1:阴影的水平偏移量，正值阴影在右侧，负值阴影在左侧，必填
• <length>--2:阴影的垂直偏移量，正值阴影在底部，负值阴影在顶部，必填
• <length>--3:阴影的模糊距离，必须为正值，值越大，阴影边缘越模糊，非必填
• color：阴影颜色

 

注：

• <length>必须为具体的长度单位值，不可使用百分比
• 可以为一个元素指定多个阴影

 

示例：

1).霓虹灯效果

.demo1{
    text-shadow: 0 0 20px #fff;
    color: #fff;   
}

.demo1{
    color: #fff;
    /*添加多个阴影效果*/
    text-shadow: 0 0 5px #fff, 
                       0 0 10px #fff, 
                       0 0 15px #fff, 
                       0 0 40px #ff00de, 
                       0 0 70px #ff00de;
}

 

2).投影效果

.demo2{
    color: #000;
    text-shadow: 0 1px 1px #fff;
}

 

3).浮雕效果

 

.demo3{
    color: #ccc;
    text-shadow: -1px -1px 0 #fff, 
                       1px 1px 0 #333, 
                       1px 1px 0 #444;
}

 

4).模糊效果

.demo4{
    color: transparent;
    text-shadow: 0 0 5px #f96;
}

 

5).3D效果

.demo5{
    color: #fff;
    /*text-shadow不支持阴影外延，所以使用多个阴影效果模拟*/
    text-shadow: 1px 1px rgba(197, 223, 248,0.8), 
                        2px 2px rgba(197, 223, 248,0.8), 
                        3px 3px rgba(197, 223, 248,0.8), 
                        4px 4px rgba(197, 223, 248,0.8), 
                        5px 5px rgba(197, 223, 248,0.8), 
                        6px 6px rgba(197, 223, 248,0.8);
}

 

6).复古效果

.demo6{
    color: #eee;
    text-shadow: 5px 5px 0 #666, 
                       7px 7px 0 #eee;
}