如何在不影响边框半径的情况下缩放元素？答案

【问题标题】：How do you scale a element without affecting the border-radius?如何在不影响边框半径的情况下缩放元素？
【发布时间】：2017-11-20 20:16:14
【问题描述】：

目前我的 webkit 缩放转换会影响边框半径，使其变形。是否有任何 css3 hack 可以让我保留圆角？ Example

【问题讨论】：

缩放的重点是相对调整一个视觉元素整体的大小。

标签： css

【解决方案1】：

只需手动操作宽度和高度，而不是使用缩放：

#pan {
    width:500px;
    height:500px;
    position:relative;
    background:#aaa;
}

#rec {
    width:100px;
    height:100px;
    position:absolute;
    top:250px;
    left:250px;
    background:#fff;
    -webkit-transition:500ms cubic-bezier(0.785, 0.135, 0.000, 0.940)
}

#rec:hover{
    /*-webkit-transform:scale(3.5,1);*/
    width:300px;
    left:150px;
    -webkit-transition:500ms linear; 
    -webkit-border-radius:35px;
}

<div id="pan">
  <div id="rec"></div>
</div>

【讨论】：

【解决方案2】：

您可以将您感兴趣的元素放在一个 div 中。然后，您可以将 css 边框* 从您的元素移动到外部 div。然后，您可以对原始元素应用缩放** 变换；边框（现在在外部 div 中）应该不受影响。

*（可能还有其他属性，如绝对定位、大小等）

**（任何进一步的变换，例如旋转或 3d 变换，都可以单独应用于外部 div）

【讨论】：