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).霓虹燈效果spa

.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).投影效果3d

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

 

3).浮雕效果code

 

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

 

4).模糊效果blog

.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;
}
相關文章
相關標籤/搜索