html盒子圆角属性,CSS3盒子模型边框怎样实现圆角效果？

盒子圆角属性,CSS3盒子模型边框怎样实现圆角效果？"/>

html盒子圆角属性,CSS3盒子模型边框怎样实现圆角效果？

在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。border-radius属性基本语法格式如下。

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

在上面的语法格式中，水平和垂直半径参数均有4个参数值，分别对应着矩形的四个圆角(每个角包含着水平和垂直半径参数)，如图1所示。border-radius的属性值主要包含2个参数，即水平半径参数和垂直半径参数，参数之间用“/”隔开，参数的取值单位可以为px(像素值)或%(百分比)。

图1 参数所对应的圆角

border-radius属性同样遵循值复制的原则，其水平半径参数和垂直半径参数均可以设置1~4个参数值，用来表示四角圆角半径的大小，具体解释如下。

● 水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同；

● 水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径，具体示例代码如下。img{border-radius:50px 20px/30px 60px;}

在上面的示例代码中设置图像左上和右下圆角水平半径为50px，垂直半径为30px，右上和左下圆角水