DIV 内带有背景的元素，圆角溢出答案

【问题标题】：Element with background inside DIV with rounded corners bleeding outDIV 内带有背景的元素，圆角溢出
【发布时间】：2020-06-25 12:43:48
【问题描述】：

我的头撞到了 HTML/CSS 墙上。我试图在带有圆角的 DIV 顶部放置一个彩色标题。标题的背景超出了包含 DIV 的圆角范围。

我尝试将background-clip:padding-box 应用于DIV 和H1 的样式，但没有任何效果。我已经尝试将border-radius 应用到H1，但由于高度不同，所以边角不会对齐以达到预期的效果。

任何想法我在这里缺少什么？

<!DOCTYPE html>
<html>
  <head>
    <title>Rounded Edges With Background</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
      }

      .outer_box {
        width: 500px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 25px;
      }

      .title {
        width: 100%;
        background: #00f;
        color: #fff;
        margin-top:0;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <div class="outer_box">
      <h1 class="title">Here's a title</h1>
      <p>Here's some content.</p>
    </div>
  </body>
</html>

（也在fiddle中）

【问题讨论】：

标签： html css

【解决方案1】：

检查此代码，您要找的是这个吗？

overflow: hidden 隐藏通过.outer_box 边界的任何内容

和padding: 10px; 只是为了让它看起来不错。

<!DOCTYPE html>
<html>
  <head>
    <title>Rounded Edges With Background</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
      }

      .outer_box {
        width: 500px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 25px;

        overflow: hidden;
      }

      .title {
        width: 100%;
        background: #00f;
        color: #fff;
        margin-top:0;
        background-clip: padding-box;
        
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="outer_box">
      <h1 class="title">Here's a title</h1>
      <p>Here's some content.</p>
    </div>
  </body>
</html>

【讨论】：

谢谢！ overflow 是我所缺少的。（这只是我在实际代码中看到的内容的再现，因此缺乏漂亮）

【解决方案2】：

你应该添加属性

overflow:hidden

到outer_box。基本上它所做的就是隐藏超出边界的任何内容。您还应该在标题中添加一些填充。

【讨论】：

【解决方案3】：

您必须将h1 标记内的outer_box 圆角边框设置为。

.outer_box h1 {
    border-radius: 25px;
  }

【讨论】：