我正在努力实现一个微妙的曲线在我的底部<div>
这是我想要实现的目标的示例图像
我试图通过这样做来实现它：
section.box{
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
}
这就是我得到的。
我可以做什么来改变这个？
UPDATE
我尝试过的：
.box{
height: 300px;
background-color: white;
}
.round-bottom{
background-color: pink;
height: 200px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div class="box">
<section class="round-bottom">
</section>
</div>
您可以通过调整来实现这一点border-radius在你的 CSS 规则中，例如：
border-radius: 0 0 100% 100% /100%;
并通过添加阴影，例如：
box-shadow: 1px -3px 22px 0px;
希望这可以帮助。
body{
margin: 0px;
}
div#box{
height: 50px;
width: 100%;
background-color: #ea3e5e;
border-radius: 0 0 100% 100% /100%;
box-shadow: 1px -3px 22px 0px;
}
<div id="box"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
