ホームページ > ウェブフロントエンド > CSSチュートリアル > タブ付きナビゲーション用に 1 つを除くすべての面にボックス シャドウを作成するにはどうすればよいですか?

タブ付きナビゲーション用に 1 つを除くすべての面にボックス シャドウを作成するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-04 10:30:40
オリジナル
241 人が閲覧しました

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

1 面を除くすべての面でボックス シャドウを実現する

問題: 開いているタブに明確なシャドウがあるタブ付きナビゲーションを作成しますが、開いているタブを除く、タブ セクション全体の下部に影が表示されます。

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 変更を使用すると、目的の効果が得られます。開いているタブには、それを際立たせる影が付き、タブ セクション全体の下部に沿って一貫した影が付きます。

以上がタブ付きナビゲーション用に 1 つを除くすべての面にボックス シャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート