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
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 , |
沒有留言:
張貼留言