使用边框半径进行形状设计

您可以通过调整元素的边框和边框半径来形成各种形状。

圆角盒

如果您使用从 1px 开始并增加到 Radius 属性的值，那么您最终会得到一个圆角矩形。

通过增加半径的像素值，您将逐渐达到胶囊状的形状。

胶囊/药丸形状

胶囊形状的半径是元素高度或宽度值的一半（以像素为单位）。进一步增加值不会改变形状。

椭圆

半径可以采用百分比值。半径 50% 将呈现平滑的椭圆形。更大的值不会影响形状。

椭圆的形状与元素的宽度直接相关。椭圆的长宽比由其宽度与高度的比率决定。

圆圈

圆本质上是宽度和高度相等的椭圆。要制作圆，请将 50% 的半径应用于宽度和高度测量值相同的任何元素。

动态角

与任何其他元素类似，您可以根据各种状态自定义边框半径。

1. 访问 徘徊 陈述并引入 边界半径
2. 切换到默认设置 没有任何 陈述并应用 过渡 到 边界半径 属性。调整或保持持续时间和缓和

探索有关元素状态和转换的更多信息.