【CSS3】当 transition 遇上 border-radius
本文发布于 8 年前，部分内容可能已经失去参考价值。
有个案例：一张矩形照片头像要用圆形加边框的方式显示到页面上，并且当鼠标移到上面时，边框不动，图像会在边框内部渐变放大一些。
很容易地，我们想到这样的布局：
<style>
#div_face { width: 100px; height: 100px; border: 3px solid #CCC; border-radius: 50%; overflow: hidden; }
#div_face img { width: 100px; height: 100px; transition: all .5s ease-out; }
#div_face img:hover { transform: matrix(1.04,0,0,1.04,0,0); }
</style>
<div id="div_face">
<img src="/App_Themes/2016/images/temp.jpg" />
</div>
可是……渐变过程中竟然变回矩形了，动画结束又恢复正常。于是改进了一下：
<style>
#div_face { position: relative; width: 100px; height: 100px; border: 3px solid #CCC; border-radius: 50%; overflow: hidden; z-index: 1; }
#div_face img { width: 100px; height: 100px; transition: all .5s ease-out; z-index: 0; }
#div_face img:hover { transform: matrix(1.04,0,0,1.04,0,0); }
</style>
搞定！
