深入理解Box-Shadow以及运用
深入理解Box-Shadow以及运用
Box-Shadow(盒子阴影)可设置的属性一共有六个,分别是x轴、y轴、blur、spread(模糊扩散范围)、color、insert(内阴影),其中经常用到就是设置X Y轴、blur(模糊度)以及color(颜色)这四个值。
实战
准备工作
1. 创建一个含有盒子的网页,为了好看些我加了一张图片,代码如下:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子上浮</title> </head> <body> <div id="box1"> <img src="./images/mi_1.png" alt=""> </div> </body> </html>
2. 创建好之后给这个盒子添加一些样式,代码如下:
<style>
body{ background:#f5f5f5;}
#box1{ width:233px; height:298px; float:left; margin:20px;}
</style>
前两个步骤结合效果如下:
注意:图片来自小米官网
3. 给盒子添加阴影效果,代码如下:
#box1{ width:233px; height:298px; float:left; margin:20px; transition:.5s;}
<!-- 注意这里给盒子添加了过度动画,transition:.5s; -->
#box1:hover {
transform:translateY(-3px);
box-shadow: 0 5px 5px 5px lightgray;;
}
实战结果
注意:图片来自小米官网
总结
实战用到了Box-Shadow中的blur,给blur设置了相应的样式,并且为了让效果更佳,加了一个过渡动画。
越努力越幸运!