有没有办法防止父元素的背景显示在边缘上，当父和孩子都有边界半径？ [英] Is there a way to prevent background of a parent element from showing up on the edge when both parent and child have a border radius?

问题描述

所以让我们假设我们有一个div在另一个div;父和子div都具有相同的边界半径，并且子元素的宽度和高度是父级的100％。如果父级的背景与子级的背景不同，则此背景的细线将在子级圆角附近可见：

这是什么样子：

下面是一个关于CodePen的例子： a href =http://codepen.io/azangru/pen/MKdQmG =nofollow noreferrer> http://codepen.io/azangru/pen/MKdQmG

而代码本身：

HTML：

 < div class =dark-bg> 
< div class =outer> 
< div class =middle> 
< div class =inner> 
< / div> 
< / div> 
< / div> 
< / div> 
  

CSS：

 code> html，body {
 height：100％; 
 margin：0; 
 padding：0; 
} 
 
 .dark-bg {
 height：100％; 
 width：100％; 
 padding-top：10px; 
 background：black; 
} 
 
 .outer {
 width：200px; 
 height：200px; 
 margin：auto; 
 background：white; 
 border-radius：10px; 
} 
 
 .middle {
 width：100％; 
 height：100％; 
 background：yellow; 
 border-radius：10px; 
} 
 
 .inner {
 width：100％; 
 height：100％; 
 background：black; 
 border-radius：10px; 
} 
  

有办法防止父母的背景（无需完全删除父母的背景）

解决方案

尝试：

  .inner {
 border-radius：8px; 
} 
  

为什么？ http://www.mrgeek.me/

查看它的工作方式：

$

b $ b

http://codepen.io/anon/pen/RrmQeG p>

So let’s say we have a div inside another div; both the parent and child divs have the same border-radius, and the child’s width and height are 100% of the parent’s. If the parent has a background different from the child’s, a thin line of this background will be visible around the round corner of the child:

This is what it looks like:

Here is an example on CodePen: http://codepen.io/azangru/pen/MKdQmG

And the code itself:

HTML:

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
  </div>
</div>

CSS:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dark-bg {
  height: 100%;
  width: 100%;
  padding-top: 10px;
  background: black;
}

.outer {
  width: 200px;
  height: 200px;
  margin: auto;
  background: white;
  border-radius: 10px;
}

.middle {
  width: 100%;
  height: 100%;
  background: yellow;
  border-radius: 10px;
}

.inner {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 10px;
}

Is there a way to prevent the parent’s background from showing up from behind the child (without removing the parent’s background completely I mean)?

解决方案

Try this:

  .inner {
     border-radius: 8px;
  }

Why? http://www.mrgeek.me/technology/tutorials/web-design/css3-border-radius-property-explained/

See it working:

http://codepen.io/anon/pen/RrmQeG

这篇关于有没有办法防止父元素的背景显示在边缘上，当父和孩子都有边界半径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！