1

我在带有背景颜色、框阴影和边框的 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？

谢谢！

4

3 回答 3

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;
}
于 2013-02-21T07:18:23.400 回答
0

我不认为你可以覆盖 .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 之外的其他编辑方式，这些真的可以修复。

于 2013-02-21T07:22:52.110 回答
0

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

.button {
    margin: -10px;
}

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

这使得按钮大于边框和阴影，而overflow: hidden关闭，掩盖了问题。

但是它的缺点是按钮变得比您想要的大。在某些设计中可能很好，但我们有一个框/列结构，只有 -2px 的边距看起来太糟糕了，我无法使用它（我是一个完美主义者）！

虽然它可能会帮助其他人！

于 2013-02-22T05:14:03.700 回答