Html 使内部 div 背景粘在外部 div 边框上

发布于06月16日

我想使内部div的背景与外部div边界保持一致，但即使没有边界半径，它们之间也有一个很小的空间.

It's not very obvious on the code snippet which is why I included this screenshot:

这是可以解决的问题吗？我还没有发现有人有同样的问题，Firefox和Chrome中似乎都有这种情况.

#outer{
  height: 5rem;
  width: 10rem;
  background-color: red;
  border: 2px solid blue;
  border-radius: 1rem;
  overflow: hidden;
}
#inner{
  background-color: blue;
  height: 2rem;
  width: 100%;
}
#somecontent{
  height: 3rem;
  width: 100%;
}

<div id="outer">
    <div id="inner">
    </div>
    <div id="somecontent"></div>
</div>

推荐答案

This is another trick, don't use background-color for the outer
instead, give background-color property to #inner and #inner2 and put your content inside inner2, now instead of a border, you can use box-shadow.

这样，您可以同时拥有锐利的边缘和不同 colored颜色的边框.

*,
*::before,
*::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

#outer {
    height: 5rem;
    width: 10rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 0 2px black;
    margin: auto;
}

#inner {
    background-color: blue;
    height: 2rem;
    width: 100%;
}

#inner2 {
    height: 4rem;
    background-color: red;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="outer">
    <div id="inner">
    </div>
    <div id="inner2"></div>
  </div>

</body>


</html>