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

Question

目前我的 Webkit 变换缩放会影响边框半径，使其失真。有没有 CSS3 的技巧可以让我保留圆角？示例

- p0larBoy

---

“缩放”的目的是相对调整整个视觉元素的大小。 - BoltClock

Answer 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>

- user229044

Answer 2

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

*（以及可能的其他属性，如绝对定位、大小等）

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

- ninjagecko