web-dev-qa-db-ja.com

CSS3ボックスの影のサイズ–パーセント単位？

CSS3のボックスシャドウプロパティを使用する必要があるプロジェクトに取り組んでいます。それで結構ですが、シャドウのスプレッドサイズを親オブジェクトのパーセンテージに設定できないことがわかりました。

ボックスシャドウは加算的ではないため、親のサイズを参照として使用しないことを完全に理解しています。

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

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

解決策はありますか？ jQueryは不要です。純粋なCSSのみです。

csspercentagebox-shadow
38
Jozko Remen

シャドウのスプレッドサイズを親オブジェクトのパーセンテージに設定できないことがわかりました

そうだね。ただし、親オブジェクトにfont-sizeを設定し、emsにオブジェクトサイズを定義し、同じemsを使用してbox-shadowサイズを定義できます。

または、親オブジェクトがたまたまウィンドウである場合は、 ビューポート単位：vwおよびvh を使用できます。

15
mik01aj

インセット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 は、このルートを進むことにした場合に、必要なプレフィックスとともに（特に）放射状グラデーションを生成するための非常に便利なツールです。

6
shakyjake

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

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

プロジェクトで使用して応答性を高めていますが、万が一に備えて正常に失敗するように、常にpxまたはemで既に定義されているパラメーターに従います。例えば：

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

このユニットについて知っておく必要のあるすべてを説明したすばらしい記事を次に示します。 http://snook.ca/archives/html_and_css/font-size-with-rem

4
alex

要素の幅が定義されている場合（パーセント幅を除く）、幅のカスタムプロパティを作成し、ボックスシャドウのcalc()関数でカスタムプロパティを使用できます。

たとえば、次のCSSコードは、ボックスシャドウの「広がり半径」をdivの幅の20％にします。

div {
    --width: 100px;
    width: var(--width);
    box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}
0
Ian Y.

ボックスシャドウをコンテナの幅またはコンテナの高さに合わせてスケーリングしますか？シャドウの高さと幅を実際に指定することはできず、スプレッドのみを指定できます。したがって、コンテナの幅が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>
0
Cornelius