- 阴影落在下方:box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
- 阴影落在四周:box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 0 5px rgba(0, 0, 0, .2), 0 0 5px rgba(0, 0, 0, .2);
- 阴影落在左内侧:box-shadow:2px 0 2px rgba(0, 0, 0, .1) inset, 2px 0 0 rgba(0, 0, 0, .1)
- 阴影并且边框向上2px:-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
- 阴影在上边内侧: box-shadow:0 3px rgba(0, 0, 0, .1) inset
- box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0); - 起落设置时间:
.animation {
transition: all .2s ease-in 0s;
}
.animation:hover {
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.2),0 15px 30px rgba(0,0,0,0.2),0 0 15px rgba(0,0,0,0.2);
box-shadow: 0 15px 30px rgba(0,0,0,0.2),0 15px 30px rgba(0,0,0,0.2),0 0 15px rgba(0,0,0,0.2);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}