C3的文字阴影—text-shadow

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