CSS Border-Radius显示父母的风格

Question

我在div的顶部有一个按钮，背景颜色，框阴影和边框。该按钮具有边框半径角，顶部div的背景颜色和其他样式显示。

最简单的解释方法是这个jsfiddle：

http://jsfiddle.net/wCppN/1/

HTML：

<div class="journal-content-article">
    <div class="button">
        Hello Button
    </div>
</div>

<div class="journal-content-article">
    Normal article with white background.
</div>

CSS：

.journal-content-article {
    background-color: white;
    border: 1px solid black;
    box-shadow: 5px 5px 5px darkgrey;
}

.button {
    border-radius: 20px;
    background-color: green;
}

我希望能够按原样保留“普通文章”div，但能够从“按钮”中删除白色背景，黑色边框和框阴影。

这是通过Liferay网络内容完成的，因此我仅限于可以进行HTML更改。只有div'journal-content-article'中的任何HTML都可以更改，并且无法向该div或任何父div添加其他类。

我也无法更改'普通文章'div内容，因为用户（没有CSS / HTML体验）必须输入。

关于如何实现这一点的任何想法，还是我被迫使用Javascript？

谢谢！

Answer 1

也许这个：

http://jsfiddle.net/wCppN/7/

<div class="journal-content-article">
    <div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
    <div class="myClass">Normal article with white background.</div>
</div>

.journal-content-article {
    margin: 20px 20px;
    width: 150px;
}
.myClass {
    background-color: white;
    border: 1px solid black;
    box-shadow: 5px 5px 5px darkgrey;
}

Answer 2

我不认为你可以覆盖.journal-content-article的风格而不用像fredsbend建议那样，或者能够编辑div本身。您可以有效地覆盖白色背景，如下所示：

div class="journal-content-article">
   <div class="journal-content-inside">
    <div class="button">
        Hello Button
    </div>
    </div>
</div>

.journal-content-inside {
    background-color: black;
    margin: 0 auto;
    padding: 0;
    width: 150px;
    overflow: hidden;
    border: none;
 }

然而，这并不能解决边框和框阴影问题。我不知道那些真正可以在没有javascript或其他编辑方式的情况下修复div。

Answer 3

可以帮助其他人的一种方法是在按钮上设置负边距：

.button {
    margin: -10px;
}

http://jsfiddle.net/wCppN/11/

这会使按钮大于边框和阴影，并且overflow: hidden关闭，可以解决问题。

然而它的缺点是按钮变得比你想要的大。在一些可能很好的设计中，但是我们有一个盒子/柱子结构，只有-2px的边缘看起来非常不合适我使用它（我是一个完美主义者）！

虽然可能对其他人有帮助！