css3阴影

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

基本使用

• 外阴影(默认)
  
  

  外阴影

  box-shadow: 10px 10px 10px 5px #999;

• 内阴影

  
  
  

  内阴影

 box-shadow: 10px 10px 10px 10px #999 inset;

• 内阴影+外阴影

  
  
  

  内阴影+外阴影

   box-shadow: 10px 10px 10px 10px #999 inset,
      10px 10px 10px 5px #999

文字阴影

text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必需。水平阴影位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色

基本使用

• basic

basic

   text-shadow: 0 3px 3px #999;

• 闪烁效果

  
  
  

  闪烁

      text-shadow: 0 0 2px, 0 0 6px;

• 空心效果

空心

      text-shadow: 1px 1px #ff9a16, -1px -1px #ff9a16, 1px -1px #ff9a16, -1px 1px #ff9a16;

• 文字描边效果

文字描边

      text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;

• 3d效果

3d效果

  text-shadow: 0 1px hsl(0, 0%, 85%),
      0 2px hsl(0, 0%, 80%),
      0 3px hsl(0, 0%, 75%),
      0 4px hsl(0, 0%, 70%),
      0 5px hsl(0, 0%, 65%),
      0 5px 10px black;