CSS3 Zone d'ombre de la taille – pour-cent des parts?

Si vous êtes après un encart box-shadow vous pouvez utiliser un radial-gradient de fond pour imiter le comportement. Ainsi, au lieu de -

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

Vous utiliseriez -

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

Support: FF16+, IE10+, Safari 5.1+

Je ne trouve pas de réponse définitive sur lorsque google Chrome a commencé à soutenir le bien, mais ma version actuelle (39.0.2171.65) certainement le prend en charge.

ColorZilla est un joli outil utile pour générer des radiale (entre autres) des gradients le long de avec la nécessaire préfixes si vous décidez d'aller dans cette voie.

Voulez-vous que le box-shadow pour s'adapter à la largeur du conteneur ou de la hauteur du conteneur? Vous ne pouvez pas spécifier la hauteur et la largeur de votre ombre, seulement une diffusion. Donc, si votre conteneur réduit de 10% dans la largeur, mais ne se réduit pas à la hauteur, alors votre ombre sera réduit de 10% (si possible), par exemple, votre ombre est à la hauteur de l'échelle, même si elle ne devrait probablement pas.

Si vous voulez le box-shadow à fait à l'échelle correctement en ce qui concerne la hauteur et la largeur, vous devez créer plusieurs zones d'ombre - un pour la hauteur, l'une pour la largeur.

Toutefois, vous ne serez jamais en mesure de l'échelle réelle de l'ombre, seul le conteneur de l'ombre. Si vous créez un conteneur à l'intérieur de votre conteneur principal et puis de lui donner des marges négatives et fixez le box-shadow. Cependant, vous remarquerez très vite que votre ombre pousse réellement à la place de la réduction lorsque vous mettez à l'échelle du conteneur vers le bas.

Semble un peu exagéré pour essayer quelque chose qui n'est pas évolutive, sans l'aide de requêtes de média ou jQuery.

Toutefois, si vous êtes à la recherche pour les évolutive des frontières, c'est à dire box-shadow sans flou :P, alors ne cherchez pas plus loin:

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>