边框半径+背景颜色==裁剪的边框 [英] border-radius + background-color == cropped border

问题描述

考虑使用border-radius，border和background-color CSS属性的div:

Consider a div with the border-radius, border, and background-color CSS attributes applied:

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

现在考虑类似的布局，但在inner-div中指定background-color:

Now consider a similar layout but with the background-color specified in an inner-div:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

内部 <div>的background-color遮盖了外部 <div>的边界，这让我感到沮丧.

I'm dismayed by the fact that the background-color of the inner <div> is obscuring the border of the outer <div>.

这是问题的简化示例.实际上，我将<table>用作具有交替行颜色的内部元素.我将<div>用作外部元素，因为border-radius似乎不适用于<table>元素. 这是此问题示例的jsfiddle .

This is a simplified sample of the problem. In reality, I'm using a <table> as the inner element with alternating row colors. And I'm using a <div> as the outer element since border-radius does not seem to work on the <table> element. Here's a jsfiddle of a sample of this problem.

有人对解决方案有建议吗?

Does anyone have a suggestion for a solution?

推荐答案

在外部div中尝试overflow:hidden:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

这篇关于边框半径+背景颜色==裁剪的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！