webkit-transform 影响边界半径答案

【问题标题】：webkit-transform affect border-radiuswebkit-transform 影响边界半径
【发布时间】：2014-02-09 20:24:23
【问题描述】：

我正在尝试在鼠标悬停时对图像执行 CSS3 变换过渡。此图像的边框半径在动画后消失（在 Chrome 中）。

这里是html：

<div class="inner">
    <a class="imgLink" href="item.iframe.htm" target="_top">

        <img src="myimage.jpg" alt="">

        <span class="imgLinkOverlay">&nbsp;</span>

    </a>

</div>

和css：

.inner {
      margin: 0.75em;
      background: #FFF;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      zoom: 1;
    }

.imgLink img {
      width: 100%;
      display: block;
      position: relative;
      -webkit-transition: -webkit-transform 0.25s ease-in-out;
      transition: transform 0.25s ease-in-out;
    }


.imgLink:hover img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
    }

这里可以找到小提琴：http://jsfiddle.net/3x2ft/

【问题讨论】：

标签： css webkit

【解决方案1】：

已修复！我将此规则添加到.inner：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

【讨论】：