CSS3 - `box-shadow`阴影

CSS3 - box-shadow 阴影

CSS3中，利用box-shadow可以给一个盒模型添加阴影，包括内部阴影和外部阴影。

语法

selector {
    box-shadow: h-shadow v-shadow blur spread color inset;
}

语法释义

值	可选与否	描述
h-shadow	必填	水平阴影的位置。数值沿X轴改变，允许负值；0表示在水平正下方
v-shadow	必填	垂直阴影的位置。数值沿Y轴改变，允许负值；0表示在垂直正下方
blur	可选	阴影边缘模糊的程度
spread	可选	阴影的大小
color	可选	阴影的颜色
inset	可选	将外部阴影 (outset) 改为内部阴影。

实例

对比效果 1
对比效果 2

HTML代码：

        <div class="cover cover1"></div>
        <div class="cover cover2"></div>

CSS代码：

.cover {
            margin: 50px;
            border-radius: 50%;
            width: 180px;
            height: 180px;
            background: url('images/xuwz.jpg');
}

.cover1 {
            /* 内部阴影 淡蓝色 */
            box-shadow:0 0 30px 10px lightblue inset;
}

.cover2 {
            /* 外部阴影，红色 */
            box-shadow:0 0 30px 10px red;
}       

兼容性

目前最新的主流浏览器全部兼容box-shadow属性，若考虑到向下兼容，使用-webkit、-moz前缀。
如上可修改为：

div {
    box-shadow: 10px 10px 5px 20px pink；
    -webkit-box-shadow: 10px 10px 5px 20px pink；
    -moz-box-shadow: 10px 10px 5px 20px pink；
}