如何根据 CSS 转化百分比计算像素？

Question

为什么我们有一个代码，我们通过给出 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>

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

如何根据 CSS 转化百分比计算像素？

How do I calculate Pixel based on Percentage for CSS conversion?

html

css

image

pixel

percentage