为什么 在border-radius:50px;中，当值大于等于50px时弯曲的半径效果会跟border-radius:50px;一样呢？
来源：2-1 CSS3边框 圆角效果 border-radius
慕粉1420362554
2016-10-17 23:48
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>
</body>
</html>
写回答
关注
3回答
-
- 慕粉3791347
- 2017-03-11 17:32:09
如果两个边框值大于或等于半径且相等，则默认为半径值，如半径为50px,设置（80px 0 0 50px）；则将80默认为50px,而50px=80-50=30px效果为（50px 0 0 30px），若相差大于半径，则最大的默认为半径，其他的按比例来显示
-
- paulihs
- 2016-12-13 10:28:14
我也有这种情况，在设置border-radius大于半径时，还是一个圆。这应该有问题
-
- 隔壁诸葛村夫
- 2016-10-18 00:27:24
border-radius:50px 0px 0px 50px;中，你将第一个值改成80px；试试看，是不一样的
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242553 学习 · 2623 问题
相似问题