问答详情
源自:2-1 CSS3边框 圆角效果 border-radius

为什么 在border-radius:50px;中,当值大于等于50px时弯曲的半径效果会跟border-radius:50px;一样呢?

<!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>


提问者:慕粉1420362554 2016-10-17 23:48

个回答

  • 慕粉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;试试看,是不一样的