html - 使内部 div 背景贴在外部 div 边框上-6ren

html - 使内部 div 背景贴在外部 div 边框上

转载作者：行者123 更新时间：2023-12-05 03:22:47

25

4

我想让我的内部 div 的背景与外部 div 边框保持一致，但即使没有边框半径，它们之间也有一个小空间。我尝试了一些 box-sizing 和 background-clip 值，但它似乎不起作用，即使我使用类似 transform 的东西使 div 上升 10px，这个小空间仍然存在。

它在代码片段上不是很明显，这就是我包含此屏幕截图的原因:

有什么可以解决的吗？我还没有找到有同样问题的人，而且它似乎在 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>

最佳答案

这是另一个技巧，不要对outer
使用background-color相反，将 background-color 属性赋予 #inner 和 #inner2 并将您的内容放在 inner2 中，现在您可以使用盒子阴影。

这样你就可以同时拥有锋利的边缘和不同颜色的边框。

*,
*::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>

关于html - 使内部 div 背景贴在外部 div 边框上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72633834/

25

4

0

文章推荐： json - 如何将嵌套的 json 文件识别和分解为数据框的列？

文章推荐： mysql - 对 MySQL 中 GROUP_CONCAT 的每个元素执行 LIKE 操作

文章推荐： jhipster - JHipster 子生成器阶段有什么作用？

javascript - Bootstrap Navbar(贴)动态宽度
我在获取附加 Bootstrap 导航栏以在页面滚动时正确调整其宽度时遇到问题。我希望导航栏在页面滚动时保持其包含元素内部的宽度，或者占据页面的整个宽度(从左到右开始) 我做错了什么，或者我需要做什
css - 如何使用material design让div float 在页面右侧(贴)
所以我正在尝试创建一个布局，其中我有一个带有卡片的页面，右侧有一张摘要卡片，在我滚动时会 float 。一种典型的词缀对象，以前在 bootstrap 中见过。到目前为止，这是我的尝试: 出于某种原因

首页

博学

6Ren·AI

商城

html - 使内部 div 背景贴在外部 div 边框上