如何在不影響邊界半徑的情況下縮放元素？

Question

目前我的webkit轉換縮放會影響邊界半徑，使其變形。是否有任何css3黑客可以讓我保留圓角？ Example

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>

Answer 2

你可以把你感興趣的元素放在div中。然後，您可以將CSS邊框*從元素移動到外部div。然後，您可以將縮放**轉換應用於原始元素;邊界（現在在外部div）應該不受影響。

*（以及可能的其他屬性，諸如絕對定位，大小等）

**（任何進一步的變換，例如旋轉或3D變換，然後可分別施加到外層div）