如何根据 CSS 转换的百分比计算像素？ [复制]

【问题标题】：How do I calculate Pixel based on Percentage for CSS conversion? [duplicate]如何根据 CSS 转换的百分比计算像素？ [复制]
【发布时间】：2021-07-16 07:59:27
【问题描述】：

我们有一个代码，可以通过提供border-radius:50% 来对图像进行四舍五入，但我的老师问我使用像素而不是百分比。我的问题是如何使用像素单位而不是百分比单位来舍入图像..

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>
    <style>
    .logo img{
        width:60px;
        height:60px;
        border-radius:50%;    
        margin-left:5%;
    }
    </style>   
</head>

<body>

 <div class="logo">
    <img src="Images/icon.png" />
 </div>

</body>
</html>

【问题讨论】：

标签： html css image pixel percentage

【解决方案1】：

由于元素为60px x 60px，border-radius: 50% 等价于border-radius: 30px/30px（两边各占50%）。

类似这样的：

.logo {
   background-color: red;
   width: 60px;
   height: 60px;
   border-radius: 30px/30px;
}

<div class="logo">
</div>

【讨论】：

还有border-radius:30px;
只有宽高相同的时候才会这样，如果不一样就需要这样。所以它有点笼统。