Question

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

矩形的应用设置：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>

关于border-radius，请阅读this nice article on CSS-Tricks。

Answer 2

您必须首先在css中使用border-radius并在硬盘中使用它无论是px，em还是其他数字。

如果您发现之后遇到相同的问题，则问题还可能是您为对象内部的填充级别设置的边框半径太高。如果你想保持这个尺寸的物体，我建议你将半径降低到5px。否则增加对象内的填充。

边界半径产生日食，需要90度圆角。 CSS

2 个答案: