css阴影教程,CSS3阴影效果box-shadow实例讲解

CSS3阴影效果box-shadow实例讲解2017-10-16 22:38

使用阴影效果，小编用得最多的地方就是产品展示页面，将包含产品的div边框给其加上阴影。

css3的box-shadow和text-shadow有点类似，不过前者是对象实现图层的阴影效果，而后者是对对象的文本设置阴影。

那么CSS3阴影效果究竟是怎么实现的呢？

其实最主要的就是box-shadow。

我们先来看看语法规则：

div{box-shadow: ??||}

也就是：

div{box-shadow:inset x-offset y-offset blur-radius spread-radius color}

换句话讲：

对象选择器{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

这样讲起来就浅显易懂了。

我们来看看一个简单的实例。

div.box1{

width:300px;

height:100px;

background-color:#1abc9c;

-moz-box-shadow: 10px 10px 5px #333333; /* 老的 Firefox */

box-shadow: 10px 10px 5px #333333;

}

div的右方和下方将会产生阴影效果。

再来看一个实例

div.box2{width:300px;height:100px;-moz-box-shadow:2px 10px 11px #1abc9c; -webkit-box-shadow:2px 10px 11px #1abc9c; box-shadow:2px 10px 11px #1abc9c;}

我们将阴影模糊化处理了一些，你自己也可以修改相关的数值进行调整达到自己想要的效果。

最后关于的box-shadow说明： box-shadow:阴影水平偏移值(可取正负值)； 阴影垂直偏移值(可取正负值)；阴影模糊值；阴影颜色

Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333

webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333

Opera支持Box Shadow(阴影)：box-shadow:2px 2px 5px #333333

IE不支持Box Shadow(阴影)