box-shadow

时间：2014-09-21 15:32:20 阅读：288 评论：0 收藏：0 [点我收藏+]

标签：style blog http color ar strong 2014 div sp

box-shadow算是css3中比较常用的属性，通常的用法我们会给它传4个参数，就像下面的这个例子：

水平偏移和垂直偏移为0，模糊半径为10px，阴影颜色为正红色。

.box{
  width: 80px;
  height: 80px;
  box-shadow: 0 0 10px #f00;
}

bubuko.com,布布扣

当然我们也可以给它传更多的参数，来得到不同的效果：

box-shadow可以传6个参数：

1、inset ，表示内阴影，不填表示外阴影。

2、阴影的水平偏移量，正值时阴影在容器的右边，负值时阴影在容器的左边。

3、阴影的垂直偏移量，正值时阴影在容器的下边，负值时阴影在容器的上边。

4、阴影模糊半径

5、阴影的扩展半径。如果是正值，阴影将扩大，如果是负值，阴影将缩小。

6、阴影颜色。

内阴影

.box {
width: 80px;
height: 80px;
box-shadow: inset 0 0 10px #f00;
background-color: #dee;

bubuko.com,布布扣

我们也可以给容器同时设置内阴影和外阴影，多组阴影之间用,分隔：

.box {
  width: 80px;
  height: 80px;
  margin: 20px;
  box-shadow: inset 0 0 10px #f00,0 0 10px #00f;
}

bubuko.com,布布扣

还有一点需要注意的是，我们不能直接给img设置内阴影，看下这个例子：

设置外阴影时：

<style>
    img{
        box-shadow: 0px 0px 10px #f00;
    }
</style>

<img src="2551.jpg" width="200px">

bubuko.com,布布扣

但是设置内阴影时：

<style>
    img{
        box-shadow: inset 0px 0px 10px #fff;
    }
</style>

<img src="2551.jpg" width="200px">

bubuko.com,布布扣

解决的方法很简单，只要给img外层加上一个容器，把阴影加在该容器上即可。

扩展半径

它比内阴影还要少用到

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  box-shadow: 0 0 0 10px #edd;
}

这里没有设偏移量和模糊半径。从视觉上看，就像给box加了一个10px的边框一样。

bubuko.com,布布扣

当然box-shadow不会影响盒模型。

我们来测试下扩展半径为0、正、负值的情况，这次配合偏移和模糊效果来看：

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  box-shadow: 10px 0 10px 0px #00f;//扩展半径为0
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  box-shadow: 10px 0 10px 6px #00f;//扩展半径为正值
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  box-shadow: 10px 0 10px -6px #00f;//扩展半径为负值
}