前端前端研习社

第3章 CSS3边框-5

2016-12-12  本文已影响13人  白小虫

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个参数设置,他们分别取值:

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属性相比。

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

略 (P130-133)

3.5.6 本章小结

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

上一篇下一篇

猜你喜欢

热点阅读