border-radius深入理解

最新推荐文章于 2024-02-05 13:39:35 发布

原创最新推荐文章于 2024-02-05 13:39:35 发布 · 430 阅读

CC 4.0 BY-SA版权

15 篇文章

订阅专栏

本文详细介绍了CSS中border-radius属性的大值特性和等比例特性。当设置的圆角值过大时，浏览器将自动调整为可渲染的最大值。同时，即使其中一个方向的圆角值受限，另一个方向的值也会根据设定的比例进行相应的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大值特性
当值很大的时候，只会使用能够渲染的圆角大小渲染
单值
border-radius: 左上角水平圆角半径大小右上角水平圆角半径大小右下角水平圆角半径大小左下角水平圆角半径大小/左上角垂直圆角半径大小右上角垂直圆角半径大小右下角垂直圆角半径大小左下角垂直圆角半径大小;
斜杠前的是水平方向，斜杠后面的是垂直方向。
等比例特性
设定的水平半径和垂直半径的比例是恒定不变的，如有一方受制于大值特性，最多只能为200px（例）时，另一方的值根据其设定比例调整。