彈出框周圍的漸變邊框

Question

目前，我正在研究Office Ribbon的HTML實現，以用於Web Apps。 這是向您顯示的屏幕截圖：

您會看到我在“新項目”下的功能區上有一個下拉菜單。 到目前為止，一切都很好，但是讓我們將其與真實的Office實現進行比較：

在這里，您會看到下拉菜單周圍有一個漸變，這使得它很明顯地位於界面的頂部。

現在我無法完成任務，所以我希望有人可以給我解決這個問題的方法。

dropdown元素的HTML如下：

<div class="icon bigicon">
    <img src="Resources/Icons/MailNewItemMenu.png" />
    <div class="label">
        New<br/>Items
    </div>
    <div class="menu">
        <div class="menucontents">
            <ul style="list-style: none; padding: 0px;">
                <li style="height: 25px; line-height: 25px; text-align: left;">Create</li>
                <li style="height: 25px; line-height: 25px; text-align: left;">Manage</li>
                <li style="height: 25px; line-height: 25px; text-align: left;">Delete</li>
            </ul>
        </div>
    </div>
</div>

CSS如下：

#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon { text-align: center; display: inline-block; padding-top: 2px; padding-left: 3px; padding-right: 3px; vertical-align: top; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .bigicon { height: 70px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { padding-top: 0px; height: 24px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:hover { background-color: #cde6f7; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:active { background-color: #92C0E0; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .label { line-height: 16px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { display: inline-block; padding-right: 5px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon IMG { vertical-align: middle; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon .label { display: inline-block; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu { position: relative; top: -1px; left: 1px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents { position: relative; z-index: 100; background-color: white; left: -4px; border-top: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; background-image: linear-gradient(#C6C6C6, #C6C6C6), linear-gradient(#C6C6C6, #C6C6C6); background-size:1px 100%;     background-position: 0 0, 100% 0; background-repeat: no-repeat; }

我怎樣才能做到這一點 ？

Answer 1

使用box-shadow 。 從IE9開始受支持 。