鼠标 hover时盒子阴影效果,凸起效果_ box-shadow的应用

盒子阴影

 <div class="test-shadow"></div>
<style>
   .test-shadow{
     
        background-color: rgb(180, 224, 241);
        width: 200px;
        height: 300px;
        margin-top:30px;
    }
    .test-shadow:hover{
     
        margin-top: 0px;/*和hover的margin-top有对比,原无30,现在0,相当于上移了,30px*/
        box-shadow: 0 0 20px 2px #918f8f;/*盒子阴影*/
        transition: all 0.5s;/*持续时间*/
    }
</style>

鼠标 hover时盒子阴影效果,凸起效果_ box-shadow的应用_第1张图片鼠标 hover时盒子阴影效果,凸起效果_ box-shadow的应用_第2张图片

你可能感兴趣的