Question

我想在鼠标悬停在我的网页上缩放图像。图像位于表格单元格中。我应用了transform：scale（1.2）。它工作正常。但问题是图像有border-radius：10px，当鼠标指针在图像上移动时，图像border-radius变为零。在完全转换后，它再次变为10px。我希望在缩放时保持不变。它不仅适用于谷歌浏览器。这种效果的CSS如下......

.ProductImageStyle {
 border-radius:10px;
 display:block;
 overflow:hidden;
 -webkit-transition:all .5s;
 transition:all .5s;}

.ProductImageStyle:hover {
 -webkit-transform:scale(1.2);
 transform:scale(1.2); }

.ProductTableCell {
overflow:hidden;
text-align:justify;
border-radius:10px; }

asp.net代码如下......

<asp:Table ID="tblProducts" runat="server" CellPadding="0" CellSpacing="20">
        <asp:TableRow>
            <asp:TableCell CssClass="ProductTableCell">                    
                <asp:Image ImageUrl="./Images/1.jpg" runat="server" Height="200" Width="100%" CssClass="ProductImageStyle"/>                    
            </asp:TableCell>               
        </asp:TableRow>
</asp:Table>

请提供适当的解决方案。谢谢！

如何在使用transform：scale（）悬停时保持图像的border-radius属性？

0 个答案: