首頁 > web前端 > css教學 > 如何在選項卡式導覽之外的所有側面上建立一個框陰影?

如何在選項卡式導覽之外的所有側面上建立一個框陰影?

Barbara Streisand
發布: 2024-11-04 10:30:40
原創
207 人瀏覽過

How to Create a Box-Shadow on All Sides But One for Tabbed Navigation?

在除一側以外的所有面上實現框陰影

問題:建立一個選項卡式導航,其中開啟的選項卡具有明顯的陰影,但整個選項卡部分的底部都有陰影,不包括打開的選項卡。

要使用 CSS3 的 box-shadow 屬性來解決此挑戰,您需要建立特定的元素結構並利用自適應屬性。這是一個全面的解決方案:

CSS 修改:

  1. 在#content 中建立一個附加Div:
<code class="css">#content_over_shadow {
    padding: 1em;
    position: relative;
    background:#fff;    /* Use a solid, non-transparent background */
}</code>
登入後複製
  1. 調整#content 樣式:
<code class="css">#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888;   /* Create a line shadow along the bottom */
}</code>
登入後複製
  1. 在選項卡中加入陰影:
在選項卡中加入陰影:
<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>
登入後複製

透過使用這些CSS 修改,您可以實現所需的效果:開啟的選項卡有一個將其分開的陰影,並且整個選項卡部分的底部有一致的陰影。

以上是如何在選項卡式導覽之外的所有側面上建立一個框陰影?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板