Question

我正在尝试在弹出式面板下放置一个阴影，其定义如下：

<popupset id="mainPopupSet">
    <panel id="autoTagBookmarksPopup" noautohide="true" fade="none" backdrag="true" level="float">
        <hbox id="titleBox">
            <spacer flex="1"/>
            <image id="closeImage" align="end"/>
        </hbox>

... 我没有成功使用：box-shadow

任何人都有吸烟？

Answer 1

您可以粘贴用于box-shadow的css吗？

试试这个......

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

Answer 2

这是一个古老的问题，但是我遇到了同样的问题，并希望分享我的解决方案，所以这可能对其他人有帮助。

我还没有找到直接将阴影放置在面板上的方法。看来，面板元素外部的所有视觉内容都会被剪切掉（阴影放置在外部）。

但是，我随后为第一个孩子定义了阴影并添加了一些边距，以便可以看到阴影。

对于给定的示例，这可能看起来像这样（未经测试）：

panel#autoTagBookmarksPopup {
    background-color: transparent;
    border-width: 0px;
}

panel > hbox#titleBox {
    margin: 5px;
    border: 1px solid #bbb;
    background-color: #fff;
    box-shadow: 2px 2px 3px #888;
}

如何在XUL弹出面板下放置阴影

2 个答案: