CSS3的文字阴影—text-shadow
1、语法:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]… 或者 text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]…
2、效果
3、代码
p:nth-of-type(1) {
text-shadow: 0px 0 10px red;
}
p:nth-of-type(2) {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
p:nth-of-type(3) {
text-shadow: 0 1px 2px #000;
}
p:nth-of-type(4) {
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;
}
p:nth-of-type(5) {
text-shadow: 1px 1px 0 #f96, -1px -1px 0 #f96;
}
P:nth-of-type(6) {
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);
}
p:nth-of-type(7) {
color: rgba(255, 179, 140, 0.5);
text-shadow: 3px 3px 0 rgba(180, 255, 0, 0.5);
}
p:nth-of-type(8) {
text-shadow: 5px 5px 0 gray, 7px 7px 0 #eee;
}
p:nth-of-type(9) {
color: red;
text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}
p:nth-of-type(10) {
text-shadow: 1px 1px 0px yellow, 2px 2px 2px orange, 3px 3px 2px orangered, 5px 5px 2px red;
}
p:nth-of-type(11) {
text-shadow: 4px 4px 4px #600, 8px -6px 4px #060, -6px 8px 4px #006;
}
p:nth-of-type(12) {
text-shadow: 0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93,
-5px 4px #cdd2d5,
-5px 6px #808d93,
-6px 5px #cdd2d5,
-6px 7px #808d93,
-7px 6px #cdd2d5,
-7px 8px #808d93,
-8px 7px #cdd2d5;
}
p:nth-of-type(13) {
text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
5px 5px 1px orange,
6px 6px 2px rgba(0,0,0,0.7),
10px 10px 1px red,
11px 11px 2px rgba(0,0,0,0.7),
15px 15px 1px purple,
16px 16px 2px rgba(0,0,0,0.7);
}
