border-radius 生成eclipse，需要90度圆角。 CSS

Question

所以我试图在我的矩形（宽度 96.6%，高度 6.5%）上获得一个 90 度角角

矩形上的应用设置：Border-radius-bottom-left：5%； border-radius-bottom-right: 5%;), 这给了它一个日食形状，但它需要是一个 90 度角。

我需要使用什么设置才能得到这个？

Answer 1

您需要为您的 border-radius 使用 绝对指标，例如px、em 或 in 而不是 % 以确保 x 和 y 值是合格的。否则它们将取决于 width 和 height 的值，只要您的元素不是正方形，您就会得到一个省略号。

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rectangle {
  width: 96.6%;
  height: 6.5%;
  background: green;
  border-radius: 10px;
}

<div class="rectangle"></div>

阅读 this nice article on CSS-Tricks 关于 border-radius 的内容。

Answer 2

必须先在css中使用border-radius，然后在hard中使用数字，无论是 px、em 还是类似的。

如果您之后发现遇到同样的问题，问题也可能是您将边界半径设置得太高，无法满足对象内部的填充级别。如果你想让对象保持这个大小，我建议你将半径降低到 5px。否则增加对象内部的填充。

border-radius 生成eclipse，需要90度圆角。 CSS

Border-radius generates eclipse, need 90degree rounded corners. CSS

html

css

eclipse

rectangles