問題:建立一個選項卡式導航,其中開啟的選項卡具有明顯的陰影,但整個選項卡部分的底部都有陰影,不包括打開的選項卡。
要使用 CSS3 的 box-shadow 屬性來解決此挑戰,您需要建立特定的元素結構並利用自適應屬性。這是一個全面的解決方案:
<code class="css">#content_over_shadow { padding: 1em; position: relative; background:#fff; /* Use a solid, non-transparent background */ }</code>
<code class="css">#content { font-size: 1.8em; box-shadow: 0 0 8px 2px #888; /* Create a line shadow along the bottom */ }</code>
<code class="css">#nav li a { margin-left: 20px; padding: .7em .5em .5em .5em; font-size: 1.3em; color: #FFF; display: inline-block; text-transform: uppercase; position: relative; box-shadow: 0 0 8px 2px #888; /* Add shadows to individual tabs */ }</code>
以上是如何在選項卡式導覽之外的所有側面上建立一個框陰影?的詳細內容。更多資訊請關注PHP中文網其他相關文章!