![](/img/trans.png)
[英]How to create a div with border and radius only at the bottom, inside another div with border and radius
[英]border radius of a div inside another div is overlapping
我正在使用 React、HTML 和 CSS 制作这张卡
这是我的代码:
<div className="plan">
<div className="plan-name">
<h5>BASIC</h5>
</div>
<div className="plan-price">
<h2>$ 6.99</h2>
<span>Screen Availabilty Simultaneously</span>
</div>
<div className="plan-details">
<ul>
<li>
<span>
<CheckIcon />
</span>
Access to All Library in Unlimited
</li>
<li>New Content Monthly</li>
<li>Available on PC, Smartphones and tablet</li>
<li>Drawing in Color</li>
<li>Color in Very High Quality</li>
<li>Canceable at Any Time</li>
</ul>
</div>
</div>
CSS:
.plan {
border-radius: 25px;
overflow: hidden;
background-color: #fff;
}
.plan-name {
background-color: #3e104f;
padding: 25px 0;
border-style: solid;
border-width: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.plan-price {
color: #3e104f;
background-color: #fff;
padding: 35px 0;
}
.plan-details {
background-color: #3e104f;
height: 100%;
border-radius: 20px;
}
Output:
但是我在所有角落都得到了上面突出显示的白色边框。 谁能告诉我我在哪里做错了? 或者它来自哪里? 我该如何隐藏它?
这是正常行为,您的 CSS 没有错误。
可能的解决方案是做这样的事情
.plan {margin-top: 25px; overflow: visible;} /* here just remove overflow: hidden to show .plan-name outside of .plan */
.plan-name {margin-top: -25px; border-top-right-radius: 25px; border-top-left-radius: 25px;}
使用此代码.plan
的半径隐藏在.plan-name
下方,并且在角落中不可见。
只需添加.plan {overflow: auto;}
也适用于我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.