例4：设置div块级元素的左上角圆角效果为：水平角半径50px，垂直角半径25px。
div{border-top-left-radius: 50px/25px;}
水平角半径与垂直角半径不相等
例5：设置div块级元素为一个半径为100px的正圆形。
div{
width: 200px; height: 200px;
background-color: #ff5857;
border: solid 1px #aaaaaa;
border-radius: 100px;
}上述代码中将块级元素的圆角效果半径设置为宽度或高度的一半，这样就可以得到一个半径为宽度或高度的一半的正圆形。
例6：设置div块级元素为一个长半轴为100px，短半轴为75px的椭圆形。
div{
width: 200px; height: 150px;
background-color: #ff5857;
border: solid 1px #aaaaaa;
border-radius: 100px/75px;
}上述代码中将块级元素的水平角半径设置为宽度的一半，垂直角半径设置为高度的一半。由于这个块级元素的宽度和高度不一样，因此就可以得到一个椭圆形。
四、利用百分比实现圆角效果：
W3C规定，同样可以使用百分比来实现块级元素的圆角效果。这里，百分比值是相对于块级元素的宽度或高度来作为依据的。水平角半径的大小相对于块级元素的宽度值依据，垂直角半径的大小相对于块级元素的高度值依据。
例7：查看下列CSS代码。
div{
width: 200px; height: 200px;
border-radius: 20%;
}上述代码中，div标记的圆角效果中，水平角半径为宽度的20%，即200px * 20% = 40px。垂直角半径为高度的20%，也为40px。
例8：查看下列代码。
div{
width: 200px; height: 100px;
border-radius: 20%;
}上述代码中，div标记的圆角效果中，水平角半径为宽度的20%，即200px * 20% = 40px。垂直角半径为高度的20%，即100px * 20% = 20px。
也就是说，只要border-radius的取值为50%，则当宽度和高度相同时，得到一个正圆形；当宽度和高度不相同时，得到一个椭圆形。
总结
以上所述是小编给大家介绍的CSS3轻松实现圆角效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
