1 面を除くすべての面に CSS3 ボックス シャドウを作成する方法

CSS3 ボックスの 1 面を除くすべての面をシェーディングする

要素の 1 面を除くすべての面に CSS3 ボックス シャドウ効果を作成します。難しい仕事。次の手順でこれを実現する方法を見てみましょう。

1.影のないコンテンツのコンテナを作成します:

要素のセクションに影が付けられない場合は、その中に div を作成して、このコンテンツのコンテナとして機能します。たとえば、開いているタブを影なしにする場合は、その中に div を作成し、次のようにスタイルを設定します。

<code class="css">#content_over_shadow {
    padding: 1em;
    position: relative;
    background:#fff;
}</code>

2.コンテナのシャドウを定義します:

親コンテナ (この場合は #content) から不要なパディングを削除し、ボックス シャドウを追加します。これにより、開いているタブを除くすべてのタブの下に伸びる水平の影の線が作成されます。

<code class="css">#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888;
}</code>

3.タブに影を追加:

最後に、個々のタブに影を追加します (例: #nav li a):

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

以上が1 面を除くすべての面に CSS3 ボックス シャドウを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。