前言
最近又来研究悬停特效了，因此这次带来一个box-shadow版的悬停效果，这个效果简单易学。对于悬停效果，我在之前已经写过好几篇相关的文章，感兴趣的小伙伴可以翻阅我之前的文章看一看。接下来咱们话不多说，直接看效果。
效果预览
效果实现
其实布局不用多说，就是一个div盒子，布局非常简单。
<div class="box">
<h2>Box</h2>
</div>
我们主要来看一看如何对这个盒子进行CSS样式设计，让它变成一个可以实现box-shadow悬停效果。
首先我们给box类加上样式，相关代码如下。
.box{
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
......
transition: 0.5s;
}
指定定位方式为相对定位，并设置了宽度和高度为300px。再将元素设置为弹性容器，使其内部元素可以使用弹性布局，这样就可以方便后面实现垂直水平居中的效果。最后通过transition: 0.5s来设定过渡效果为0.5秒，用于在状态改变时产生平滑的过渡效果。这里样式比较简单，通俗易懂。
再来给box类中的h2标题设置基本样式，相关代码如下。
.box h2{
......
opacity: 0.1;
transition: 0.5s;
}
这里主要进行了透明度设置，将元素的透明度设置为0.1，可以认为是非常透明。最后也是给该元素设置了一个时间为0.5秒的过渡效果。
我们开始定义悬停在box类上时的样式，接下来就是给box类以及box类的子元素加上hover悬停效果，相关代码如下。
.box:hover{
box-shadow: 0 40px 0 -20px #19b733,
0 -40px 0 -20px #dc0028,
-40px 0 0 -20px #1328db,
40px 0 0 -20px #ff560b,
inset 0 40px 0 -20px #19b733,
inset 0 -40px 0 -20px #dc0028,
inset -40px 0 0 -20px #1328db,
inset 40px 0 0 -20px #ff560b;
}
.box:hover h2{
opacity: 1;
}
具体来说，使用了box-shadow属性来创建了八个带有不同颜色的阴影效果，分别代表从上方向下的绿色阴影，偏移量为0，模糊半径为20px；从下方向上的红色阴影，偏移量为0，模糊半径为20px；从左方向右的蓝色阴影，偏移量为0，模糊半径为20px；从右方向左的橙色阴影，偏移量为0，模糊半径为20px。
关于这个inset，它代表的意思是内部。没有加上inset，相当于是在外边创造出效果，有了inset，就可以从内部创建出效果。举个例子吧，inset 0 40px 0 -20px #19b733代表它是内部从上方向下的绿色阴影，偏移量为0，模糊半径为20px，颜色为#19b733。
总之，这些阴影效果使得box元素在鼠标悬停时呈现出一种立体感和动态效果。
完整代码大家可以去码上掘金查看。
总结
以上就是整个效果的实现过程了，代码通俗易懂，效果呈现易于理解。最近一直在看悬停效果，也算是颇有心得了，对于悬停，可以有很多可扩展性的效果，大家可以踊跃尝试一下，如果遇到问题，可以在评论区讨论。
