border-radius 属性用于定义元素的圆角。它有两个值,代表椭圆曲线的水平和垂直半径。 border-radius 的行为根据是否使用百分比或像素/ems 作为单位而有所不同。
根据 W3C 规范,当百分比为用于 border-radius ,它们指的是边框框的相应尺寸。这意味着:
这结果是椭圆形,其中两个半径都与尺寸成正比
另一方面,使用单个非百分比值(例如像素或 ems)作为边框半径将始终结果形成一个圆圈。这是因为水平轴和垂直轴应用了相同的半径。
在 border-radius: 999px 的示例中,圆的半径理论上应为 999px。但是,应用了附加规则来防止曲线重叠,从而有效地将半径减小到元素最小边尺寸的一半。因此,本例中的半径变为 50px。
对于具有固定大小的元素,如您的示例中,您可以使用百分比和像素获得类似的结果。在你的情况下,边界半径:50%;相当于 border-radius: 115px/50px; (双方各50%)。
以上是'border-radius”的百分比与像素/Ems:有什么区别?的详细内容。更多信息请关注PHP中文网其他相关文章!