border-radius为什么显示效果会不一样

<!DOCTYPE html>
<html>
<head>
    <title>border-radius</title>
	<style type="text/css">
		div{
			width: 400px;
			height: 200px;
			border:2px solid #f00;
			border-radius:50% 50%;  这是椭圆
			border-radius:200px 100px; //为什么效果和上面的效果不是一样的，不是个椭圆
		}
	</style>
</head>
<body>
<div></div>
</body>
</html>

芥子1204 2017-04-12

源自：CSS3边框与圆角 1-4 编程练习

收起

1回答

小于飞飞回答被采纳获得+3积分 2017-04-13 14:21:21

你好，border-radius 后可以是1、2、3、4 值，如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。

border-radius:200px 100px; 左上角和右下角的圆角半径是200px , 有右上角和左下角的圆角半径是100px ，所以看到的效果不是椭圆。
border-radius:50% 50%; 百分比，因为是长方形，根据长宽的50% 作为圆角半径，水平半径200px ,垂直半径100px , 根据值得设置，每个角都是，所以看到的是椭圆。

希望对你有帮助，祝学习愉快。

收起回答