豫ICP备17040950号-2

css阴影效果

有阴影的图,看上去高大上些?不管怎样,UI设计了阴影,咱就照做好了。

语法:

1
box-shadow: h-shadow v-shadow blur spread color inset;

解释:

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

常见用法:

1
2
3
div{
box-shadow: 10px 10px 5px #0cc;
}

四个值分别是水平阴影位置、垂直阴影位置、模糊距离、颜色。

实际案例:

1
2
3
<a href="" class="confirm">
<span>马上去抢2G流量</span>
</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.confirm{
display: inline-block;
box-shadow: 0 .5rem 1.5rem #0cc;
border-radius: 5px;
margin-top: 12%;
width: 98%;
height: 17%;
background: url(../../img/flowrate/blue.jpg) no-repeat;
background-size: 100% 100%;
color: #fff;
span{
display: inline-block;
margin-top: 3%;
font-size: 1.5rem;
}
}

最终效果如下: