Effect of shadow around the block after mouse over

This effect is actually very simple , Just add one to the element :hover pseudo-classes , And add css3 Of box-shadow attribute , The visual suspension can be realized by establishing a projection outward .
Don't talk much , On dry ：
html:

<div class="hh"> Xiao Yao shows you how shadows appear </div>

css:

.hh{
     width: 300px;height: 100px; margin:30px;background: wheat;}
.hh:hover{
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);}

effect ：

Does it look like a card float ？ If you want to become larger and resuspend on the original basis, it is also very simple （ add to :before pseudo-classes ）. Keep looking down ：
html：

<div class="hh"> Xiao Yao shows you how shadows appear </div>
**```
css:**
```css
.hh{ width: 300px;height: 100px; margin:30px;position: relative;background: wheat;}
.hh:before{ content: ''; position: absolute; left: -16px; right: -16px;top:-18px;bottom: -18px;}
.hh:hover:before{box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24); }

effect ：

Finally, expand the concept a little （ Go to Baidu online for details ）：
boxShadow Attribute is to add one or more drop-down shadows to the box . Every shadow is made by 2-4 Length value 、 An optional color value and an optional inset Key words . The attribute values represent ：x Shaft offset 、y Shaft offset 、 Fuzzy range ( Optional )、 Diffusion range ( Optional )、 Color ( Optional )、 Whether the projection is inward ( Optional , Default outward ).