box-shadow 阴影

发布时间：2023-03-15 11:06:35 所属栏目：教程来源：

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

1. 官方定义
Box-shadow 属性向框添加一个或多个阴影。

2. 解释
通过

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   可选。阴影的颜色
4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
all   all   all   all   all   all   all   all
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 Box-shadow 属性。

5. 实例
<div class="demo">
网
</div>
给demo添加一个阴影。
.demo{
width: px;
height: px;
text-align: center;
line-height: px;
Box-shadow: px px px #ccc;

添加一个阴影效果图
给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(, , , ) ;

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

.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 形成的阴影效果可能是一个组合。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!