CSS3阴影box-shadow


   作者蓝石榴    由lan16转载自蓝石榴    更新于2016-09-15 13:58    已被浏览187次

1.使用方法:
  box-shadow是向盒子添加阴影,支持添加一个或者多个。
  很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法:
  box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
  ①X轴偏移量 必须,水平阴影的位置,允许负值;
  ②Y轴偏移量 必须,垂直阴影的位置,允许负值;
  ③阴影模糊半径 可选,模糊距离;
  ④阴影扩展半径 可选,阴影的尺寸;
  ⑤阴影颜色 可选,阴影的颜色,省略默认为黑色;
  ⑥投影方式 可选,设置为inset时为内部阴影方式,省略为外部阴影方式。
  注意:inset可以写在参数的第一个或最后一个,其它位置是无效的。

2.为元素设置外阴影:
  .boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px 4px 6px #666
  }
  效果如下:

3.为元素设置内阴影:
  .boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px 2px 6px #333333 inset
  }
  效果如下:

4.添加多个阴影:
  .boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset
  }
  效果如下:

5.X轴偏移量为负数:
  .boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:-4px 4px 6px #666
  }
  效果如下:

6.Y轴偏移量为负数:
  .boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px -4px 6px #666
  }
  效果如下: