时间戳

首页 > 解决方案 > DIV 内带有背景的元素，圆角溢出

html - DIV 内带有背景的元素，圆角溢出

问题描述

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

我尝试将 abackground-clip:padding-box应用于 theDIV和H1' 样式但没有任何效果。我尝试将 aborder-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>

（也在小提琴中）

标签： htmlcss

解决方案

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

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>

推荐阅读