46

CSS3 box-shadow プロパティを使用する必要があるプロジェクトに取り組んでいます。それは問題ありませんが、影の広がりサイズを親オブジェクトのパーセンテージに設定できないことがわかりました。

box-shadow は加法的ではないことを十分に理解しています。したがって、親のサイズを参照として取りません。

しかし、(ブレークポイントだけでなく) 流動的にスケーリングするオブジェクトを備えた完全に応答性の高いサイトが必要であるという事実を考えると、これも問題を引き起こします。シャドウをスプレッド プロパティに絶対単位 (em または px) でのみ設定できます。

これに対する解決策はありますか？コンテナー (「影」の場合 - ぼかしなし) 内で (コンテンツ用の) 内部コンテナーを使用することを考えましたが、これにより別の問題が発生します - 内部コンテナーの垂直方向の中央揃えです。

解決策はありますか？jQuery は使用せず、純粋な CSS のみでお願いします。

4

5 に答える 5

20

影の広がりサイズを親オブジェクトのパーセンテージに設定できないことがわかりました

真実。ただしfont-size、親オブジェクトに設定してから、オブジェクトのサイズをems で定義し、同じems を使用してbox-shadowサイズを定義することができます。

または、親オブジェクトがたまたまウィンドウである場合は、viewport units:vwおよびvhを使用できます。

于 2015-11-23T13:03:30.097 に答える
7

インセット を使用している場合box-shadowは、放射状グラデーションの背景を使用して動作を模倣できます。だから代わりに -

box-shadow: inset 0 0 100% #000;

あなたが使うだろう -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);

サポート: FF16+、IE10+、Safari 5.1+

Chrome がこのプロパティのサポートをいつ開始したかについての決定的な答えは見つかりませんが、現在のバージョン (39.0.2171.65) は確実にサポートしています。

ColorZillaは、このルートをたどる場合に必要な接頭辞とともに放射状 (とりわけ) グラデーションを生成するための非常に便利なツールです。

于 2014-11-26T15:48:02.600 に答える
4

remユニット（root em unit）を使ってみましたか？これを使用して、流動的にスケーリングできると思います。

rem ユニットは常にルート html 要素に相対的であるため、それに応じてスケーリングされ、内部コンテナーなどについて心配する必要はありません。また、現時点ではかなり幅広いブラウザをサポートしています。

私は自分のプロジェクトでそれを使用して応答性を高めていますが、念のために適切に失敗するように、常に px または em によって既に定義されているパラメーターに従います。例えば： 

font-size: 14px; font-size: 1.4rem;

このユニットについて知っておくべきことをすべて説明した素晴らしい記事があります: http://snook.ca/archives/html_and_css/font-size-with-rem

于 2013-01-02T11:20:19.637 に答える
0

ボックスの影をコンテナーの幅またはコンテナーの高さに合わせてスケーリングしますか? 影の高さと幅を実際に指定することはできず、広がりのみを指定できます。したがって、コンテナーの幅が 10% 縮小しても高さが縮小しない場合、影は (可能であれば) 10% 縮小します。

ボックス シャドウを高さと幅に関して実際に正しくスケーリングする場合は、複数のシャドウを作成する必要があります。1 つは高さ用、もう 1 つは幅用です。

ただし、実際の影をスケーリングすることはできず、影のコンテナのみをスケーリングできます。したがって、メイン コンテナー内にコンテナーを作成し、負のマージンを与えてボックス シャドウをアタッチします。ただし、コンテナーを縮小すると、影が縮小するのではなく実際に成長することにすぐに気付くでしょう。

メディア クエリや jQuery を使用せずにスケーラブルではないものを試してスケーリングするのは、少しやり過ぎのようです。

ただし、スケーラブルな境界線、つまりぼかしのないボックス シャドウ :P を探している場合は、もう探す必要はありません。

http://jsfiddle.net/925r2/3/

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }

    .wrapper {
        position: relative;
        margin: 100px auto 0;
        width: 80%;         /* .content width */
        height: 400px;      /* .content height */
    }

    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;   /* .content background */
    }

    .shadow {
        position: absolute;
        top: -10%;          /* .content shadow top height */
        right: -5%;         /* .content shadow right width */
        bottom: -10%;       /* .content shadow bottom height */
        left: -5%;          /* .content shadow left width */
        background: #000;   /* .content shadow, unfortuntely no blur effect */
    }
</style>

<div class="wrapper">
    <div class="shadow"></div>
    <div class="content">This is your content</div>
</div>
于 2014-07-11T22:19:15.403 に答える