「border-radius」的百分比與像素/Ems：有什麼不同？

Border-radius 百分比與像素和 Ems

border-radius 屬性用來定義元素的圓角。它有兩個值，代表橢圓曲線的水平和垂直半徑。 border-radius 的行為會根據是否使用百分比或像素/ems 作為單位而有所不同。

百分比

根據 W3C 規範，當百分比為用於 border-radius ，它們指的是邊框框的相應尺寸。這意味著：

• 水平半徑是元素寬度的 50%。
• 垂直半徑是元素高度的 50%。

這結果是橢圓形，其中兩個半徑都與尺寸成正比

像素和Ems

另一方面，使用單一非百分比值（例如像素或ems）作為邊框半徑將始終結果形成一個圓圈。這是因為水平軸和垂直軸應用了相同的半徑。

在 border-radius: 999px 的例子中，圓的半徑理論上應為 999px。但是，應用了附加規則來防止曲線重疊，從而有效地將半徑減小到元素最小邊尺寸的一半。因此，本例中的半徑變成 50px。

百分比和非百分比邊框半徑的比較

對於具有固定大小的元素，如您的範例中，您可以使用百分比和像素獲得類似的結果。在你的情況下，邊界半徑：50%；相當於 border-radius: 115px/50px; （雙方各50%）。

以上是「border-radius」的百分比與像素/Ems：有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！