第3章 CSS3边框-5

3.5 CSS3盒子阴影属性

box-shadow用来定义元素的盒子阴影。

3.5.1 box-shadow属性的语法及参数

语法

E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:none inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

取值：

box-shadow属性至多有7个参数设置，他们分别取值：

none：默认值，元素没有任何阴影效果。
阴影类型（inset）：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径（blur-radius）：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径（spread-radius）：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色（color）：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

3.5.2 box-shadow属性使用方法

1、单边阴影效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-shadow 设置单边阴影效果</title>
    <style>
        .box-shadow{
            width: 200px;
            height: 100px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin: 20px;
        }
        .top{
            box-shadow: 0 -2px 0 red;
        }
        .right{
            box-shadow: 2px 0 0 green;
        }
        .bottom{
            box-shadow: 0 2px 0 blur;
        }
        .left{
            box-shadow: -2px 0 0 orange;
        }
    </style>
</head>
<body>
    <div class="box-shadow top"></div>
    <div class="box-shadow right"></div>
    <div class="box-shadow bottom"></div>
    <div class="box-shadow left"></div>
</body>
</html>

box-shadow 设置单边阴影效果

添加一个半径模糊

.top{
    box-shadow: 0 -2px 5px red;
}
.right{
    box-shadow: 2px 0 5px green;
}
.bottom{
    box-shadow: 0 2px 5px blue;
}
.left{
    box-shadow: -2px 0 5px orange;
}

有模糊值得单边阴影效果

调整阴影位移

.top{
    box-shadow: 0 -2px 5px -3px red;
}
.right{
    box-shadow: 2px 0 5px -3px green;
}
.bottom{
    box-shadow: 0 2px 5px -3px blue;
}
.left{
    box-shadow: -2px 0 5px -3px orange;
}

box-shadow 单边阴影效果

2、四边相同阴影效果

（1）只设置阴影模糊半径和阴影颜色

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 20px;
    box-shadow: 0 0 10px #06c;
}

box-shadow 设置四边相同阴影

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 20px;
    box-shadow: 0 0 10px 10px #06c;
}

box-shadow 扩展半径加强阴影效果

（2）只设置扩展半径和阴影颜色

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 20px;
    box-shadow: 0 0 0 10px #06c;    //效果跟直接设置“10px”实线边框一样
}

box-shadow 并不是盒模型中的元素，不会计算到内容宽度。

四边相同阴影效果

查看更多详细信息及demo

3、内阴影

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 20px;
    box-shadow: inset 3px 3px 10px #06c;
}

box-shadow 制作内阴影

不过box-shadow 的内阴影使用在图片“img”元素上是没有任何效果的。

可以在图片外层添加一个容器，将box-shadow的内阴影使用在该容器上，这样“img”就具备了内阴影效果。

4、多层阴影

其实box-shadow可以多层阴影同事使用，每层阴影之间使用逗号“,”隔开。而每层阴影的使用方法都和前面一样。

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 100px;
    box-shadow: -5px 0 5px red,
                0 5px 5px blue,
                5px 0 5px green,
                0 -5px 5px orange;
}

box-shadow 多层阴影效果

.box-shadow{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 100px;
    box-shadow: 0 0 0 1px red,
                0 0 0 5px blue,
                0 0 0 8px green,
                0 0 0 12px yellow,
                0 0 0 16px orange,
                0 0 0 20px #06c,
                0 0 0 24px lime;
}

box-shadow 制作多色边框效果

3.5.3 浏览器兼容性

主流浏览器都支持，IE9+支持。

box-shadow 浏览器兼容表

3.5.4 box-shadow 属性的优势

从实现盒子阴影来说，box-shadow是最方便的，不管是使用背景图片，还是使用滤镜或者说JS脚本，都无法和box-shadow属性相比。

box-shadow具有多个属性参数可选，能制作出圆润平滑的阴影效果。
代码维护方便，可以随时更改参数来实现效果的更新。

3.5.5 实战体检：制作3D搜索表单

略（P130-133）

3.5.6 本章小结

本章主要介绍CSS3新增的边框属性，首先从CSS的border属性着手切入，分别介绍了CSS3新增边框特性，border-color、border-image、border-radius以及box-shadow。详细介绍了每个特性的语法规则，并且结合一些简单的案例以图解的方式介绍了这些特性的具体使用方法以及在IE下相应的兼容和处理方法。