CSS3阴影效果box-shadow实例讲解|三体教程
文章目录

CSS3阴影效果box-shadow实例讲解

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

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

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

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

我们先来看看语法规则:

div{box-shadow: <length> <length> <length>?<length>?||<color>}

也就是:

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 class="box1"></div>
亲自测试一下

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

再来看一个实例

<style>
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;}
</style>
<div class="box2"></div>
亲自测试一下

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

最后关于的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(阴影)

本文网址:http://www.santii.com/article/118.html


数据更新时间:2018-07-22