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;
}