一个计算机技术爱好者与学习者

0%

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;
}
}

最终效果如下:

  • 本文作者: 好好学习的郝
  • 原文链接: https://www.voidking.com/dev-css-box-shadow/
  • 版权声明: 本文采用 BY-NC-SA 许可协议,转载请注明出处!源站会即时更新知识点并修正错误,欢迎访问~
  • 微信公众号同步更新,欢迎关注~