17站长网 网站首页 编程教程 CSS3教程 查看内容

box-shadow 阴影

Box-shadow 阴影

使用这个属性可以让页面更有立体感,给元素添加一个阴影,使得元素看起来是悬浮在原来的位置,下面就看看它的用法吧。

1. 官方定义

Box-shadow 属性向框添加一个或多个阴影。

2. 解释

通过 Box-shadow 可以给任意 H5 元素添加阴影,可以是一个,如果用,号隔开可以添加多个。

3. 语法

Box-shadow:h-shadow v-shadow blur color;
.demo{
    Box-shadow:px px px #ccc;
}

属性值

说明
h-shadow可选。水平方向阴影位置,以文字的中心为起点 >0 是往右,<0 时候偏左。
v-shadow可选。竖直方向阴影位置,用法同上。
blur可选。模糊的大小。
color可选。阴影的颜色

5. 兼容性

IEEdgeFirefoxChromeSafariOperaiosandroid
allallallallallallallall

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 Box-shadow 属性。

6. 实例

<div class="demo">
网
</div>
  1. 给demo添加一个阴影。

.demo{
    width: px;
    height: px;
    text-align: center;
    line-height: px;
    Box-shadow: px px px #ccc;
}

效果图


编程之家


添加一个阴影效果图
  1. 给demo添加多个阴影。

.demo{
    width: px;
    height: px;
    text-align: center;
    line-height: px;
    Box-shadow: px px px #ccc,px px px rgba(, , ,),px px px rgba(, , , ) ;
}

效果图


编程之家


添加多个阴影效果图

7. 经验分享

它的一把用来给元素添加一个阴影,交互设计师们热衷于在鼠标覆盖到元素时候,给元素增加一个悬浮效果,使它变得不同,例如:

.demo{
    width:px;
    height:px;
    transition: Box-shadow s;
}
.demo:hover{
     Box-shadow: px px px #ccc;
}

而网上常见的 css3 下雨效果,就是利用 Box-shadow 颜色叠加的特性制作出来的。

<div class="demo"></div>
.demo{
    width: px;
    height: px;
    border-radius: ;
    Box-shadow: px px px #dedede, px px px #dedede,px px px #dedede,px px px #dedede;
}

效果图


编程之家


下雨效果效果图

如果画得密集些就更像了,当然这些就需要专业的设计师去做一个方案了。

最后这里介绍一下阴影效果使用的窍门。

.demo{
      width: px;
      height: px; 
      text-align: center;
      line-height: px;;           
      Box-shadow:  px  px -px #000, -px  px -px #000;
}

效果图


编程之家


给元素增加悬浮效果效果图

看完这个例子,我们应该已经明白 Box-shadow 形成的阴影效果可能是一个组合。

8. 小结

  1. 如果给一个元素添加多个阴影,那么后面的颜色层级高于前面的,也就是说如果前 3 个参数一样,后面的颜色会覆盖前面的颜色。

  2. 不要给不规则的图形添加阴影,因为这只会添加到块级元素中,不会验证图片的路径添加阴影,可以使用滤镜来达到这样的效果。

返回顶部