如何使子div边框覆盖父div边框的角？ [复制]答案

【问题标题】：How to make child div border overlay corner of parent div border? [duplicate]如何使子div边框覆盖父div边框的角？ [复制]
【发布时间】：2021-01-20 20:50:44
【问题描述】：

我正在尝试制作一个如图所示的盒子。

但我的小盒子的边框位于大盒子的内部，而不是坐在大盒子边框的顶部。

我需要让粉红色的“鸡肉”小盒子正好位于灰色大盒子的右上角。

<!DOCTYPE html>
<html>
    <head>
        <title>Coursera Assignment 1</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <style type="text/css">
            * {
                box-sizing: border-box;
                margin:0px;
                font-family: Helvetica, Arial, sans-serif;
                line-height: 1.3;
            }
            h2.chicken {
                background-color: #D59898;
                border: 2px solid black;
                text-align: center;
                width: 100px;
                margin: 0px 10px 0px 0px;
                float: right;
                margin-right: 0px;
            }
            div.chicken {
                background-color: grey;
                border: 2px solid black;
                width: 30%;
                position: relative;
            }
            p.chicken {
                clear: right;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h1>Our Menu</h1>
        <div class="chicken">
            <h2 class="chicken">Chicken</h2>
            <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
        </div>
    </body>
</html>

【问题讨论】：

这是一个简单的，设置为较小的框边框-左和下，右和上将取自父 :)
谢谢我最初尝试过，但使用了错误的边框技术：0px 0px 2px 2px;感谢您向我展示正确的方法！
只需将border-right: 0 和border-top: 0 添加到h2.chicken

标签： html css

【解决方案1】：

使用负边距：

    margin: -10px -10px 0px 0px;

完整代码：

        * {
            box-sizing: border-box;
            margin:0px;
            font-family: Helvetica, Arial, sans-serif;
            line-height: 1.3;
        }

        h2.chicken {
            background-color: #D59898;
            border: 2px solid black;
            text-align: center;
            width: 100px;
            margin: -10px -10px 0px 0px;
            float: right;
        }

        div.chicken {
            background-color: grey;
            border: 2px solid black;
            width: 30%;
            position: relative;
        }

        p.chicken {
            clear: right;
            padding: 10px;
        }

    <h1>Our Menu</h1>


<div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
</div>

【讨论】：

不需要负边距，只要去掉不能与父边框折叠的边框即可。
@G-Cyrillus 我认为这些都是完成任务的同样有效的方法。从折叠的侧面移除边框可能会更好bit，因为它的语义更bit，但我觉得这是分裂的头发:-)
@TylerH 负边距需要解决以前不需要的规则；），尽可能简单是我的观点。 没有 IE6 来证明计数器规则的合理性 我们也有 position:relative 或 transform 来移动它，然后 var() CSS 很有用，所以不需要重置 margin/top/right/ 的偏移值translate() 如果修改了边框大小;)
我在回答这个问题：要让盒子在顶部，负边距可以让鸡的完整边框用另一种颜色，这取决于它的设计目标。

【解决方案2】：

2 个简单的选项：

注意：父子节点的边框不会像在表格布局中那样折叠，它们需要被移除... 101 问题。

不要画右上边框（如果颜色相同）

<!DOCTYPE html>
<html>

<head>
  <title>Coursera Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <style type="text/css">
    * {
      box-sizing: border-box;
      margin: 0px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.3;
    }
    
    h2.chicken {
      background-color: #D59898;
      border: 2px solid black;
      border-top:none;
      border-right:none;
      text-align: center;
      width: 100px;
      margin: 0px 10px 0px 0px;
      float: right;
      margin-right: 0px;
    }
    
    div.chicken {
      background-color: grey;
      border: 2px solid black;
      width: 30%;
      position: relative;
    }
    
    p.chicken {
      clear: right;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Our Menu</h1>


  <div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note
      the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
  </div>




</body>

</html>

改用 box-shadow（如果颜色可能不同）

<!DOCTYPE html>
<html>

<head>
  <title>Coursera Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <style type="text/css">
    * {
      box-sizing: border-box;
      margin: 0px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.3;
    }
    
    h2.chicken {
      background-color: #D59898;
      box-shadow: 0 0 0 2px blue ;
      text-align: center;
      width: 100px;
      margin: 0px 10px 0px 0px;
      float: right;
      margin-right: 0px;
    }
    
    div.chicken {
      background-color: grey;
      border: 2px solid black;
      width: 30%;
      position: relative;
    }
    
    p.chicken {
      clear: right;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Our Menu</h1>


  <div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note
      the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
  </div>




</body>

</html>

【讨论】：