深入理解Box-Shadow以及运用
Posted tinglogin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入理解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" > </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–逆战班–梧杺
以上是关于深入理解Box-Shadow以及运用的主要内容，如果未能解决你的问题，请参考以下文章