1

ブラウザのパフォーマンスへの影響により、box-shadowCSS プロパティを使用できません。これは、シャドウを含む同じ外観のスタイルを持つ必要がある、似たような外観の要素がページに多数あるためです。これが、従来の PNG 画像を使用して影を実装したい理由です。

事実

  1. 私の要素は事前定義されており、さらに重要なことに固定されたピクセル幅を持っています
  2. auto内容に応じて流体の高さ ( ) があります。
  3. それらは要素に直接コンテンツを持ち、一部の子要素は境界線の外側に配置されます
  4. CSS3 を使用できますが、パフォーマンスが重要な部分 (グラデーション、影など) は避ける必要があります。
  5. CSS疑似要素は無制限に使用可能

要件

  1. 流動的なシャドウを作成するために追加のラッパー要素を追加しないでください
  2. アプリケーションはモバイル ブラウザーでスムーズに実行する必要があります。モバイル デバイスの処理能力はデスクトップ コンピューターよりもはるかに低いため、シャドウによってパフォーマンスが大幅に低下するようです。

可能な方向

私は疑似を使用:beforeし:afterて、含まれている要素に上から下および下の影を表示することを考えましたが、これらの疑似は親要素内に表示され、z-indexこれらの子よりも親を高く配置しても効果はありません。

最終結果のビジュアルデモ

私が達成したい純粋なCSS3のこのJSFiddleデモは、PNGシャドウを使用しています。実際には、これらのボックスが多数存在するため、モバイル ブラウザーがこれらすべての影と格闘していることは想像に難くありません。

アイテムは、PNG の影が必要なボックス (下記参照) の 1 つです。左のメニューは、ボックスの外側に配置された子要素です。

Chrome で表示

CSS3 シャドウ

HTML

<div class="item">
    <menu>
        <li><a href="#">Yes</a></li>
        <li><a href="#">No</a></li>
        <li><a href="#">Maybe</a></li>
    </menu>
    <div class="content">
        Some content
    </div>
</div>

CSS3 レス

.item {
    position: relative;
    width: 300px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    margin: 20px 20px 20px calc(20px + 3.5em);
    min-height: 5em;

    &:first-child {
        margin-top: 0;
    }

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 5em;
        background-color: #fff;
    }

    menu {
        position: absolute;
        top: 0;
        left: -3.5em;
        width: 3.5em;
        margin: 0;
        border: 0;
        padding: 0;
        list-style: none;
        background-color: #fff;
        box-shadow: 0 0 10px #ccc;

        li a {
            display: block;
            text-align: center;
            padding: 2px 0;
        }
    }

    .content {
        padding: .75em 1em;
    }
}
4

1 に答える 1

1

おそらく私は何かが欠けていますが、あなたはこのように何かを望んでいるようです:

デモ

CSSは

.base {
    width: 300px;
    height: 150px;
    font-size: 100px;
    font-weight: bolder;
    background-color: lightgreen;
    position: relative;
    z-index: auto;
}

.base:after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: green;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.child {
    position: absolute;
    left: 150px;
    top: 50px;
    border: solid 1px black;
    color: red;
}

:after の背景を画像に変更するだけです。

このソリューションをフィドルに適用しました。

関連する CSS は before 疑似要素用です。

.item:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    background-image: url(http://placekitten.com/100/100);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

必要なサイズをすべてカバーするようにスケーリングされている子猫の写真を使用しました。それをあなたが望むものに変えるだけです。

疑似要素が利用可能だったので、そのようにする必要がありました。

それが機能するための鍵 (そしておそらく困難があった場所) は、 z-index: auto を .item に追加することです

更新されたデモ

まあ、それは不可能だと言っていたが、方法を見つけた。

標準的な手法は、画像を引き伸ばすのを避けるために、2つの要素を使用することです(あなたが言ったように)。問題は、利用可能な疑似要素が 1 つしかないことです。

解決策は、1 つの疑似要素を使用することですが、2 つの背景を使用して問題を解決します。

CSS（該当部分のみ）

.item:before {
    background-image: url(http://placekitten.com/320/10), url(http://placekitten.com/320/500);
    background-repeat: no-repeat;
    background-size: 100% 9px, 100% calc(100% - 9px);
    background-position: left bottom, left top;
}

下の影を覆うために、高さわずか 10 px の画像 (最初の画像) が必要です。もう 1 つは、可能な最大項目をカバーするのに十分な高さで、影の残りの部分に使用されます。暗い部分は、サポートが制限されている calc() の高さが必要になったことです。（とにかく、ボーダー画像よりはまし）

デモ 3

于 2013-09-26T17:15:05.847 に答える