标签：str 范围 gray 过渡动画 height over class blur htm
深入理解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" >
</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设置了相应的样式，并且为了让效果更佳，加了一个过渡动画。
By–逆战班–梧杺
标签：str 范围 gray 过渡动画 height over class blur htm
原文地址：https://www.cnblogs.com/TingLogin/p/12343619.html
