英文:
Difference between 50% and 70px border-radius for a 140px width element in CSS
问题
在设置CSS中的border-radius属性时，我遇到了一个奇怪的视觉差异。在CSS战斗的第一个挑战目标＃8中，我有一个固定宽度为140px的
您可以将以下代码放入这个网址："https://cssbattle.dev/play/8"，并打开Diff来检查差异。
<div a></div>
<style>
div {
position: fixed;
left: 130px;
width: 140px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 70px;
height: 150px;
background: #dd6b4d;
}
div[a] {
top: 100px;
}
</style>
我已经尝试向ChatGPT提问，它建议问题可能是由于浏览器渲染引起的。然而，我在Chrome和Bing浏览器上进行了测试，遇到了相同的问题。
英文:
I have encountered a peculiar visual difference when setting the border-radius property in CSS. In CSS battle first challenge target #8, I have a <div> element with a fixed width of 140px. The border-bottom-left-radius is set to 50%, while the border-bottom-right-radius is set to 70px. Logically, 50% should be equal to 70px in this case since the width of the element is known. However, when rendered, there is a small distinction between the two corner radii, I want to know why this happen.
this is the code you can put it in: " https://cssbattle.dev/play/8 "turn on Diff to check the difference.
<div a></div>
<style>
div {
position:fixed;
left:130px;
width: 140px;
border-bottom-left-radius:50%;
border-bottom-right-radius:70px;
height: 150px;
background: #dd6b4d;
}
div[a]{
top:100px;
}
I have tried asking ChatGPT, and it suggested that the issue might be due to browser rendering. However, I tested it on both Chrome and Bing browsers and encountered the same problem.
答案1
得分: 1
从逻辑上讲，在这种情况下，50%应该等于70px，因为元素的宽度已知。
你的错误在于假设这仅取决于宽度 - 但事实并非如此。
使用border-bottom-left-radius（以及其他属性），实际上是在指定_两个_半轴的半径，一个用于椭圆的半长轴，另一个用于半短轴。
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius#values:
水平轴的百分比指的是框的宽度，垂直轴的百分比指的是框的高度。
你在这里只指定了一个值，50% - 因此，你在一个轴方向上设置了边框半径为宽度的50%，在另一个轴方向上设置了边框半径为高度的50%。
你的元素宽度为140px，高度为150px。140的50%，与150的50%是不同的值。
所以，当然你会得到与70px不同的曲线 - 使用70px时，你为两个轴设置了_相同_的半径。
英文:
> Logically, 50% should be equal to 70px in this case since the width of the element is known.
Your mistake here is in assuming that this was dependent only on the width - but it isn't.
With border-bottom-left-radius (and the others as well), you are actually specifying two radiuses, one for the semi-major and one for the semi-minor axes of the ellipse.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius#values:
> Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
You specified only one value here, 50% - so you are setting a border radius of 50% of the width in one of the axis directions, and 50% of the height in the other.
Your element is 140px wide, and 150px high. And 50% of 140, are a different value than 50% of 150.
So of course you get a different curve here, than you would with 70px - with that, you are setting the same radius for both axes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年5月26日 16:16:53
- 转载请务必保留本文链接：https://go.coder-hub.com/76338942.html
- css
- frontend
- html
- math
评论