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

所以我试图让我的矩形一个90degree角角落（宽度96.6％，身高6.5％）的矩形边框半径产生日食，需要90度圆角。 CSS

应用的设置：边界半径，左下：5％; 边界半径右下：5％;），这给它一个月食形状，但它需要是一个90度的角落。

我需要使用什么设置来获取？

2017-02-10 LegacyProgrammer

您需要使用绝对指标代表您的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。

来源

2017-02-10 17:21:06 andreas

这样做的窍门，谢谢！ – LegacyProgrammer

不客气，很高兴我能帮忙！ – andreas

我想upvote你的答案，发现它不完整，因为它最初没有解释*为什么*。请解释原则，以便我可以删除我的。谢谢。如果你用我的措辞，我不介意。我只是写它来解释发生了什么。或者使用你自己的话，或引用一些官方的东西，这一切都取决于你:) –

您必须首先在css中使用border-radius，并在硬编码的数字中使用它，无论它是px，em还是类似的。

如果您以后发现问题相同，则问题可能是您正在使对象内部的填充级别的边框半径太高。如果你想保持这个尺寸的对象，我会建议你将你的半径降低到5px。否则增加对象内的填充。

来源

2017-02-10 17:27:16

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

回答

相关问题