用双阴影可以做出凹凸效果
box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff; box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
外加keyframe 可以做出动态效果，需要留意，上面两行不能直接使用，需要用none来做衔接；
box-shadow:none;
思考，可以增加多层动态效果。
用双阴影模拟跳动的按钮
.weixin.w-image {
padding: 2rem;
box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
}
@keyframes blink {
0% { box-shadow: none; }
25% { box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff; }
50% { box-shadow: none; }
75% { box-shadow: 0.5rem 0.5rem 1rem #c8d0e7, -0.3rem -0.3rem 0.6rem #fff; }
100% { box-shadow: none; }
}
@-webkit-keyframes blink {
0% { box-shadow: none; }
25% { box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff; }
50% { box-shadow: none; }
75% { box-shadow: 0.5rem 0.5rem 1rem #c8d0e7, -0.3rem -0.3rem 0.6rem #fff; }
100% { box-shadow: none; }
}
.weixin.w-image {
-webkit-animation: blink 5.0s linear infinite;
-moz-animation: blink 5.0s linear infinite;
-ms-animation: blink 5.0s linear infinite;
-o-animation: blink 5.0s linear infinite;
animation: blink 5.0s linear infinite;
}