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

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;
}