CSS3 Box Schattengröße - Prozenteinheiten?

Question

Ich arbeite an einem Projekt, das CSS3 box-shadow-Eigenschaft verwenden muss. Das ist in Ordnung, aber ich habe herausgefunden, dass Spread-Größe des Schattens nicht auf Prozentsatz des übergeordneten Objekts festgelegt werden kann.

Ich verstehe voll und ganz, dass Box-Schatten ist nicht additiv, so dass es nicht die Größe der Eltern als Referenz nimmt.

Aber angesichts der Tatsache, dass ich voll reaktionsfähige Website mit Objekten skalieren muss (nicht nur auf Break-Punkte), stellt dies ein Problem - ich kann Schatten Ausbreitung Eigenschaft nur in absoluten Einheiten (em oder px).

Gibt es eine Lösung dafür? Ich habe darüber nachgedacht, den inneren Behälter (für den Inhalt) im Behälter zu verwenden (für "Schatten" - es ist ohne Unschärfe), aber das schafft ein anderes Problem - vertikale Zentrierung des inneren Behälters.

Irgendeine Lösung? Keine jQuery bitte, nur reines CSS.

Dank

Answer 1

Haben Sie versucht, die rem Einheit (root em-Einheit) mit? Ich glaube, du kannst das benutzen, um es flüssig zu skalieren.

Die rem-Einheit ist immer relativ zum root html-Element, also wird sie entsprechend skaliert und Sie müssen sich nicht um innere Container oder ähnliches kümmern. Es hat auch ziemlich breite Browserunterstützung an diesem Punkt.

Ich benutze es in meinen Projekten, um sie reaktionsfähiger zu machen, aber folge immer einem Parameter, der bereits durch px oder em definiert ist, so dass er nur für den Fall einen Fehler macht. Zum Beispiel:

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

Hier ist ein großer Artikel erklärt alles, was Sie über dieses Gerät wissen müssen: http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

Wollen Sie den box-shadow mit der Breite des Behälters oder mit der Höhe des maßstab Container? Sie können nicht wirklich eine Höhe und Breite Ihres Schattens angeben, nur eine Ausbreitung. Wenn dein Behälter also um 10% in der Breite schrumpft, aber nicht in der Höhe schrumpft, wird dein Schatten um 10% schrumpfen (wenn es möglich wäre), d. H. Die Höhe deines Schattens würde skalieren, obwohl dies wahrscheinlich nicht sein sollte.

Wenn Sie möchten, dass der Box-Schatten in Bezug auf Höhe und Breite korrekt skaliert, müssen Sie mehrere Schatten erstellen - einen für die Höhe und einen für die Breite.

Sie werden jedoch nie in der Lage sein, den tatsächlichen Schatten zu skalieren, nur den Container des Schattens. Sie würden also einen Container in Ihrem Hauptcontainer erstellen und ihm dann negative Ränder geben und den Boxschatten anhängen. Sie werden jedoch bald bemerken, dass Ihr Schatten tatsächlich wächst, anstatt zu schrumpfen, wenn Sie den Behälter nach unten skalieren.

Scheint ein wenig Overkill zu versuchen, etwas zu skalieren, das nicht skalierbar ist, ohne Medienabfragen oder jQuery zu verwenden.

jedoch, wenn Sie für skalierbare Grenzen, dh box-shadow ohne Unschärfe suchen: P, dann suchen Sie nicht weiter:

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

Wenn Sie nach einem Einsatz sindbox-shadow können Sie einen Hintergrund mit radialem Verlauf verwenden, um das Verhalten nachzuahmen.Also statt -

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

würden Sie verwenden -

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

Support: FF16 +, IE10 +, Safari 5.1+

Ich kann keine definitive Antwort auf finden, wenn Chrome begann die Eigenschaft unterstützt , aber meine aktuelle Version (39.0.2171.65) unterstützt es definitiv.

ColorZilla ist ein ziemlich nützliches Werkzeug zum Erzeugen von radialen (neben anderen) Gradienten zusammen mit den notwendigen Präfixen, wenn Sie sich entscheiden, diesen Weg zu gehen.

Answer 4

Ich habe herausgefunden, dass der Schatten Ausbreitung Größe nicht auf Prozentsatz der übergeordnete Objekt festgelegt werden kann

Wahr. Sie können jedoch font-size für das übergeordnete Objekt festlegen, dann die Objektgröße in em s definieren und dieselbe em s verwenden, um die box-shadow Größe zu definieren. Wenn Ihr Elternobjekt zufällig das Fenster ist, können Sie viewport units: vw and vh verwenden.