text-shadow 文本陰影效果

text-shadow 文本陰影效果

text-shadow:       5px         5px         5px       #FF0000;
text-shadow:  水平位置  垂直位置 模糊的距離 顏色值;

1 文字添加底陰影

p { font-size:22px;
text-shadow: 2px 2px 4px red,
-10px 10px 60px blue,
10px -10px 60px blue,
-10px -10px 60px blue,
10px 10px 60px blue,
12px -12px 60px blue; }

2 文字添加活動陰影

.p {animation: mymove 5s infinite; }
@keyframes mymove {
           30% {text-shadow: 5px 10px 10px blue;}
           70% {text-shadow: 5px 10px 10px red; }  }

3 凸 / 凹

text-shadow: -3px -3px white,
2px 2px #333

text-shadow: 3px 3px white,
-2px -2px #333

4 字型輪廓

 font-size: 60px ;color: white;
 letter-spacing: 10px;font-weight:bold ;
 text-shadow: -2px 0 0 black, 
              0 2px 0 black,
              2px 0 0 black, 
              0 -2px 0 black;

5 立體字

text-shadow: 2px 2px 1px slateblue,
3px 3px 1px slateblue,
4px 4px 1px slateblue,
5px 5px 1px slateblue,
6px 6px 1px slateblue,
7px 7px 1px black;

6 光體字

text-shadow: 2px 2px 1px slateblue,
3px 3px 1px slateblue,
4px 4px 1px slateblue,
5px 5px 1px slateblue,
6px 6px 1px slateblue,
7px 7px 1px black;

文字添加底陰影

	??
text-shadow: px px px ,
px px px ,
px px px ,
px px px ,
px px px ,
px px px ,
px px px ,

#text-shadow 文本陰影效果 #html text-shadow 文本陰影效果 #html 陰影效果