为了账号安全,请及时绑定邮箱和手机立即绑定

为什么 在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>


正在回答

3 回答

如果两个边框值大于或等于半径且相等,则默认为半径值,如半径为50px,设置(80px 0 0 50px);则将80默认为50px,而50px=80-50=30px效果为(50px 0 0 30px),若相差大于半径,则最大的默认为半径,其他的按比例来显示

0 回复 有任何疑惑可以回复我~
#1

爱上慕婉清6262634

按你的办法测试了一下,实际效果值应该是这样的: 假设div1 宽50 高100;设置边框 (80px 0 0 50px);显示效果应该与div2 宽80 高160 边框(80px 0 0 50px)效果相同 div1展示效果相当于div2保持宽高比缩小至于div1大小相同时的样子
2017-09-27 回复 有任何疑惑可以回复我~

我也有这种情况,在设置border-radius大于半径时,还是一个圆。这应该有问题

0 回复 有任何疑惑可以回复我~

border-radius:50px 0px 0px 50px;中,你将第一个值改成80px;试试看,是不一样的

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信