另一个div内的div的边界半径重叠

Posted 2023-03-05

【中文标题】另一个div内的div的边界半径重叠

【英文标题】：border radius of a div inside another div is overlapping

【发布时间】：2021-04-28 07:26:18

【问题描述】：

我正在使用 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;

输出：

但是我在所有角落都得到了上面突出显示的白色边框。谁能告诉我我在哪里做错了？或者它来自哪里？如何隐藏？

【问题讨论】：

您当前的代码没有输出图像中显示的内容。发布完整的演示。

好的，等一下，我会发布一个codeandbox链接

【参考方案1】：

这是正常行为，您的 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 下方，并且在角落不可见。

【参考方案2】：

只需添加 .plan overflow: auto; 也适用于我