CSS-圆角半径值

发表于

格式和类型

  • border-*-radius属性的值可分别设定水平半径和垂直半径；若省略垂直半径，则垂直半径默认采用水平半径的值。

  • 而每个值，支持的单位有固定长度和百分比。若设置百分比格式，则水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*表示圆角的水平半径和垂直半径都为20px长度。*/
border-radius:20px;	

/*表示圆角的水平半径的长度为20px，垂直半径的长度为40px。*/
border-radius:20px/40px; 

/*表示圆角的水平半径和垂直半径都为各自边框长度的20%。*/
border-radius:20%;

/*表示圆角的水平半径为边框宽度的20%，垂直半径都为边框高度的30%。*/
border-radius:20%/30%;	

/*表示圆角的水平半径长度200px，垂直半径都为边框高度的300px。*/
border-radius: 200px 0px 0px 0px/300px 0px 0px 0px;


注：

  • 大值特性：只会使用能够渲染的圆角大小渲染
  • 等比例特性：水平半径和垂直半径的比例是恒定不变的