1. text-shadow: h-shadow v-shadow blur color;

7-1 凸版印刷效果

image.png

  1. background: hsl(210, 13%, 40%);
  2. color: hsl(210, 13%, 75%);
  3. text-shadow: 0 -1px 1px black;

7-2 空心字

image.png

  1.  background: deeppink;
  2.             color: white;
  3.             text-shadow: 1px 1px black, -1px -1px black,
  4.                          1px -1px black, -1px 1px black

7-3 文字外发光效果

image.png

  1. background-color: #333;
  2.             color: #ffc;
  3.             text-shadow: 0 0 .1em,0 0 .3em;

s.gif

  1. .glow{
  2.             width: 100px;
  3.             text-align: center;
  4.             line-height: 50px;
  5.             font-size: 30px;
  6.             background-color: #333;
  7.             color: #ffc;
  8.             transition: 1s;
  9.             text-shadow: 0 0 .1em,0 0 .3em;
  10.         }
  11.         .glow:hover{
  12.             color: transparent;
  13.             text-shadow: 0 0 .1em white,0 0 .3em white;
  14.             /* filter: blur(.1em); */
  15.         }

7-4 文字凸起效果

image.png

  1. background: #58a;
  2. color: white;
  3. text-shadow: 0 1px hsl(0,0%,85%),
  4.  0 2px hsl(0,0%,80%),
  5.  0 3px hsl(0,0%,75%),
  6.  0 4px hsl(0,0%,70%),
  7.  0 5px hsl(0,0%,65%),
  8.  0 5px 10px black;

image.png

  1. color: white;
  2. background: hsl(0,50%,45%);
  3. text-shadow: 1px 1px black, 2px 2px black,
  4.  3px 3px black, 4px 4px black,
  5.  5px 5px black, 6px 6px black,
  6.  7px 7px black, 8px 8px black