CSS3 Box-shadow Größe – Prozent-Einheiten?

Habe ich herausgefunden, dass die Ausbreitung Größe der Schatten kann nicht festgelegt werden, Prozentsatz der übergeordneten Objekts

Wahr. Sie können aber font-size auf das parent-Objekt, und definieren Sie dann die Größe des Objekts in ems und der gleichen ems zu definieren, die box-shadow Größe.

Oder, wenn Ihre übergeordneten Objekt passiert, werden die Fenster, die Sie verwenden können,viewport-Einheiten: vw und vh.

InformationsquelleAutor der Antwort mik01aj

Wollen Sie die box-shadow skaliert mit der Breite des Containers oder mit der Höhe des Containers? Man kann nicht wirklich geben Sie eine Höhe und Breite der Schatten, nur ein spread. Also, wenn Ihr container schrumpft um 10%, in der Breite aber nicht schrumpfen in der Höhe dann Ihr Schatten wird ein minus von 10% (wenn es möglich wäre), d.h. dein Schatten ist die Höhe skalieren, obwohl es wahrscheinlich nicht sollte.

Wenn Sie möchten, dass die box-shadow tatsächlich korrekt skaliert mit Bezug auf Höhe und Breite, Sie würde haben, um mehrere Schatten - eine für Höhe, eine für Breite.

Allerdings werden Sie nie in der Lage sein Maßstab die tatsächliche Schatten, nur der container der Schatten. So erstellen Sie einen container innerhalb deiner main-container und dann gebe es negative Margen und befestigen Sie die box-shadow. Allerdings wirst du bald feststellen, dass Ihr Schatten eigentlich wächst anstatt zu schrumpfen, wenn Ihnen die Skalierung des Containers nach unten.

Scheint ein bisschen übertrieben zu versuchen und zu skalieren, etwas, das nicht skalierbar ist, ohne die Verwendung von media queries oder jQuery.

Allerdings, wenn Sie schauen für skalierbare Grenzen, d.h. box-shadow ohne blur :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>

InformationsquelleAutor der Antwort Cornelius