Html 带背景的元素内有圆角的DIV_Html_Css

Html 带背景的元素内有圆角的DIV

html css

Html 带背景的元素内有圆角的DIV,html,css,Html,Css,我的头撞在HTML/CSS的墙上。我试图把一个彩色标题放在一个圆角的DIV顶部。标题的背景从包含DIV的圆角边界溢出我尝试将背景剪辑：填充框应用于DIV和H1的样式，但没有效果。我已经尝试将边界半径应用于H1，但由于高度不同，角点无法对齐以获得所需的效果你知道我遗漏了什么吗 <!DOCTYPE html> <html> <head> <title>Rounded Edges With Background</title>

我的头撞在HTML/CSS的墙上。我试图把一个彩色标题放在一个圆角的DIV顶部。标题的背景从包含DIV的圆角边界溢出

我尝试将

背景剪辑：填充框

应用于

DIV

和

H1

的样式，但没有效果。我已经尝试将

边界半径

应用于

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>


带背景的圆边
身体，
html{
宽度：100%；
身高：100%；
}
.外箱{
宽度：500px；
背景：#fff；
边框：2倍实心#000；
边界半径：25px；
}
.头衔{
宽度：100%；
背景：#00f；
颜色：#fff；
边际上限：0；
背景剪辑：填充框；
}
这是一个标题
这里有一些内容

（也在a中）

检查此代码，这是您要查找的内容吗

溢出：隐藏

隐藏通过

.outer\u框

边框的内容

和

填充：10px只是为了让它看起来好看


带背景的圆边
身体，
html{
宽度：100%；
身高：100%；
}
.外箱{
宽度：500px；
背景：#fff；
边框：2倍实心#000；
边界半径：25px；
溢出：隐藏；
}
.头衔{
宽度：100%；
背景：#00f；
颜色：#fff；
边际上限：0；
背景剪辑：填充框；
填充：10px；
}
这是一个标题
这里有一些内容
检查此代码，这是您要找的东西吗
溢出：隐藏
隐藏通过.outer\u框
边框的内容
和填充：10px只是为了让它看起来好看


带背景的圆边
身体，
html{
宽度：100%；
身高：100%；
}
.外箱{
宽度：500px；
背景：#fff；
边框：2倍实心#000；
边界半径：25px；
溢出：隐藏；
}
.头衔{
宽度：100%；
背景：#00f；
颜色：#fff；
边际上限：0；
背景剪辑：填充框；
填充：10px；
}
这是一个标题
这里有一些内容
您应该添加属性
overflow:hidden

到外箱。基本上，它所做的是隐藏任何越过边界的东西。您还应该在标题中添加一些填充。
您应该添加属性
overflow:hidden

到外箱。基本上，它所做的是隐藏任何越过边界的东西。您还应该在标题中添加一些填充。
您必须将h1
标记放在外框中
的圆形边框中
.outer_box h1 {
    border-radius: 25px;
  }

您必须将h1
标记置于outer_框内
圆形边框内
.outer_box h1 {
    border-radius: 25px;
  }

谢谢溢出
是我所缺少的。（这只是我在实际代码中看到的一个复制品，因此它缺乏美感）谢谢！溢出
是我所缺少的。（这只是我在实际代码中看到的一个复制品，因此缺乏美感）