CSS3ボックスのシャドウサイズ - パーセント単位ですか？

Question

私はCSS3のボックスシャドウプロパティを使用する必要があるプロジェクトに取り組んでいます。 これは問題ありませんが、シャドウの広がりの大きさを親オブジェクトのパーセンテージに設定することはできません。

ボックスシャドーは加法的ではないことを十分に理解しているので、親のサイズは参考にしません。

しかし、オブジェクトが完全に反応するサイト（ブレークポイントだけでなく）を必要とすることを考えると、シャドウスプレッドプロパティは絶対単位（emまたはpx）で設定できます。

これに解決策はありますか？私はコンテナ内で（内容のための）内部コンテナを使用することを考えました（「シャドウ」 - それはぼかしなしですが）、これは別の問題、つまり内部コンテナの垂直センタリングを作成します。

いいえjQuery、ちょうど純粋なCSSをしてください。

おかげ

Answer 1

あなたはremユニット（ルートのemユニット）を使用してみましたか？私はあなたがそれを流動的にスケールさせるためにこれを使うことができると信じています。

remユニットは常にルートhtml要素に関連しているため、それに応じて縮尺が変更されるため、内部のコンテナなどについては心配する必要はありません。この時点では、かなり広いブラウザサポートもあります。

私は自分のプロジェクトで応答性を高めるために使っていますが、pxやemで定義されているパラメータに従ってください。たとえば：

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

は、ここでは、このユニットについて知っておく必要があるすべてを説明する素晴らしい記事です：http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

あなたはボックスシャドウはコンテナの幅または高さにスケールしますかコンテナ？あなたは実際にあなたの影の高さと幅を指定することはできません。したがって、コンテナの幅が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> 

Answer 3

あなたははめ込み後にしている場合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 +、サファリ5.1+

を私は上の任意の決定的な答えを見つけることができません私の現在のバージョン（39.0.2171.65）は間違いなくそれをサポートしています。

ColorZillaは、このルートを下ることに決めた場合、必要なプレフィックスとともに放射状の（他の）グラデーションを生成するための非常に便利なツールです。

Answer 4

私は影の広がりの大きさは、親オブジェクト

真の割合に設定することができないことを見出しました。しかし、親オブジェクトにfont-sizeを設定し、オブジェクトサイズをemに定義し、同じemを使用してbox-shadowサイズを定義することができます。

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