内部元素应按外部元素边框半径进行修剪
内部元素应按外部元素边框半径进行修剪
提问于 2011-06-14 22:34:54
查看此处：http://jsfiddle.net/QSp2W/5/
正如您所看到的，内部的h1有一个背景颜色，它覆盖了包含div的圆角。如果你在内部h1上设置一个较小的半径，这在某种程度上是固定的，但这是一个技巧。(取消注释已注释的CSS，以了解我的意思。)
版本2(真的是23)
我不知道如何将*选择器应用于直接子代，而不是孙代。
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-06-14 22:39:03
我会给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/
Stack Overflow用户
发布于 2011-06-14 22:41:13
向包含div的内容添加overflow: hidden可以有效地获得执行所需操作的背景，但它似乎会覆盖边界！所以，不是很完美...:)
Stack Overflow用户
发布于 2011-06-14 22:41:46
你可以这样做，http://jsfiddle.net/yuliantoadi/QSp2W/8/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6345247
复制相关文章
相似问题
腾讯云开发者
