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

使用边框半径属性创建从圆角到完美圆形的圆形以及介于两者之间的所有形状。

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

圆角盒

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

 

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

胶囊/药丸形状

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

 

椭圆

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

 

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

圆圈

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

 

动态角

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

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

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

 
麦宜云
Ewan Mak 的最新帖子 (查看全部)