//上下移動

.contact_box{
text-align: center;
width: 24%;
height: 100px;
float: left;
margin-top: 20px;
transition:all 0.5s;//控制速度
}
.contact_box:hover{
margin-top: 10px;
cursor:pointer;
}

//div陰影

.container .case_list{
width: 24%;
margin-left: 1%;
margin-top: 1%;
height: 365px;
text-align: center;
float: left;
background-color:#fff;
transition:all 0.5s;
}
.case_list:hover{
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=120,strength=3);/*ie*/
-moz-box-shadow: 2px 2px 10px #cccccc;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #cccccc;/*safari或chrome*/
box-shadow:2px 2px 10px #cccccc;/*opera或ie9*/
}

轉載于:https://www.cnblogs.com/cymbidium/p/5337899.html

總結

以上是生活随笔為你收集整理的css 实现div阴影，上下移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。