Question

我有一个带有子元素的容器。容器的边界半径为0.3rem。我的子元素也有边框。我希望孩子的边界与父母的半径相同，但是我似乎做不到。我的第一种方法是让孩子与父母的0.3rem半径匹配，但是由于某些原因（即使两个元素的计算字体大小相同），边框也无法完美对齐：

我的第二种方法是在父容器上使用通常建议的overflow: hidden样式。在没有子项与父项的边界半径匹配的情况下执行此操作，会使整个按钮完全遵循父级容器的轮廓，但是现在，子项的边界在拐角处看起来“被切除”：

在子元素上保持匹配的边界曲线的同时，我有什么办法既可以跟随父容器的曲线呢？

Answer 1

不幸的是，没有，没有简单的方法可以匹配嵌套对象的边界半径。如果您尝试简单地进行匹配，则最终会得到如下所示（注意红色和蓝色之间的银色或白色）：

div {
  display: inline-block;
  border: 2px solid blue;
  border-radius: 10px;
}

span {
  display: block;
  background: red;
  height: 100px;
  width: 100px;
  border-radius: inherit;
}

<div>
  <span></span>
</div>

就您要绘制的形状而言，最好沿着这条（语法上难看的）路线走：

body {
  background: aliceblue;
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}


div > span:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

div > span:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: red;
  border-color: blue;
  border-style: solid;
}


span {
  display: block;
  height: 40px;
  width: 80px;
  background: white;
  border-width: 2px;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

从本质上讲，每当您尝试匹配两个嵌套对象的曲线时，如果将绘图逻辑展平，效果就会更好。这很麻烦，但这是我发现真正可靠的最好的结果。您将必须使用border-box来使对象的大小按其边界的外部而不是边界的内部（内容大小...很it脚）。

Answer 2

您的问题是父div周围有边框。看起来好像是在将其从下面的内容中抵消，类似于拖放阴影。

div {
  border-radius: 1rem;
  box-sizing: border-box;
}

.outer {
  width: 100px;
  height: 100px;
  background: lightgrey;
  border: 3px solid black;
}

.inner {
  width: calc(100px - 6px);
  height: calc(50px - 6px);
  position: relative;
  top: 50px;
  left: 0px;
  background: red;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
  border: 3px solid blue;
}

<div class="outer">
    <div class="inner"></div>
</div>

有两种方法可以解决此问题。您可以确保子元素覆盖外部元素，以使它们的边界和半径相同。您的另一个选择是从父容器中删除边框。

div {
  border-radius: 1rem;
  box-sizing: border-box;
  display: inline-block
}

.outer {
  width: 100px;
  height: 100px;
  margin-left: 5px;
  background: lightgrey;
  border: 3px solid black;
}

.inner {
  width: 100px;
  height: 50px;
  position: relative;
  top: 50px;
  left: -3px;
  background: red;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
  border: 3px solid blue;
}
.outer2 {
    border: none;
}
.inner2 {
    width: 100px;
    left: 0px;
    height: 50px;
}

<div class="outer">
    <div class="inner"></div>
</div>
<div class="outer outer2">
    <div class="inner inner2"></div>
</div>

使用box-sizing: border-box处理这些类型的问题总是比较简单，但是如果您不介意做更多的数学运算，那么content-box可以解决这些问题。

使用此jsfiddle，您可以轻松一点。

Answer 3

内部元素的边界半径是外部元素的填充边半径，并且

填充边（内边界）半径是外边界半径减去相应的边界厚度。

— CSS Backgrounds and Borders Module Level 3, § 5.2. Corner Shaping

div {
  border-radius: 1rem;
  border-width: 5px;
}

span {
  border-radius: 0 0 calc(1rem - 5px) calc(1rem - 5px);
  border-width: 3px;
}

/* the rest is positioning and colors */

div {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  border-color: grey;
  border-style: solid;
}

span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  border-color: #33f;
  border-style: solid;
}

<div><span></span></div>

Answer 4

设置

 border-radius: inherit;

到内部元素

如何正确匹配子元素与其父元素的边界半径

4 个答案: