内部元素应该被外部元素的边框半径裁剪

Question

请看这里：http://jsfiddle.net/QSp2W/5/ 如您所见，内部的h1具有背景颜色，该颜色会重叠包含div的圆角。如果在内部的h1上设置较小的半径，则可以解决此问题，但这是一种hack方法。（取消注释CSS以查看我的意思。）

第二个版本（实际上是23） http://jsfiddle.net/QSp2W/23/，但我不知道如何将*选择器仅应用于直接子级，而不是孙子级。

- Josh M.

Answer 1

将overflow: hidden添加到包含的div中，可以有效地使背景达到您想要的效果，但似乎会覆盖边框！所以，不是完美的... :)

- chrisfrancis27

Answer 2

你可以这样做 http://jsfiddle.net/yuliantoadi/QSp2W/8/

- yoel

---

+1 很棒的解决方案 - 保持了边界框 CSS 的正确位置并强制子元素按预期行事！ - chrisfrancis27

足够简单 - 但如果我在 div 上有一个背景 (http://jsfiddle.net/QSp2W/11/)，那么这将不起作用。（我意识到这不是问题，只是指出一下。） - Josh M.

我仍然需要使用小边框半径hack。 - Josh M.

Answer 3

我会给H1和p设置CSS属性，而不是像下面这样设置div。你可以为边框创建一个类，并将其应用于适当的元素。

http://jsfiddle.net/QSp2W/7/

CSS：

div h1
{
    padding: 2px;
    background-color: #ff0000;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Below gets it close but not quite. */
    /*border-radius: 7px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
}

div p
{
    padding: 10px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

这是使用单独的边框类： http://jsfiddle.net/QSp2W/9/

- ngen

---

这似乎是最具视觉吸引力和灵活性的解决方案，以下是我如何应用它的方式：http://jsfiddle.net/QSp2W/23/ 但我不确定如何使 * 只适用于子元素而不是孙元素。 - Josh M.

像这样 div > * http://jsfiddle.net/QSp2W/24/ 。 这将仅选择 div 的直接子元素。 - ngen

Answer 4

最直接的方法是让 div h1 继承自 div。

因此，使用 border-radius: inherit; 而不是设置半径 #。

http://jsfiddle.net/jasongennaro/QSp2W/10/

- Jason Gennaro

---

我在示例中将border-radius设置为6px的原因是，如果您将其设置与父元素相同，则它们之间会出现白色间距。 - Josh M.

дҪ еҸҜд»ҘеҒҡзҡ„еҸҰдёҖ件дәӢжҳҜдёәжүҖжңүе…ғзҙ ж·»еҠ background-colorпјҢ并дёәpж·»еҠ border-bottom-radiusгҖӮhttp://jsfiddle.net/jasongennaro/QSp2W/18/ - Jason Gennaro