CSS3 Размер теневой коробки - единицы процента?

Я работаю над проектом, который должен использовать CSS3 box-shadow свойство. Это хорошо, но я обнаружил, что размер тени не может быть установлен в процентах от родительского объекта.

Я полностью понимаю, что box-shadow не является аддитивной, поэтому она не принимает размер родителя в качестве ссылки.

Но учитывая тот факт, что мне нужен полностью отзывчивый сайт с плавно масштабируемыми объектами (не только на точках останова), но это также создает проблему - я могу установить свойство тени для распространения только в абсолютных единицах (em или px).

Есть ли какое-то решение этого? Я думал об использовании внутреннего контейнера (для содержимого) внутри контейнера (для "тени" - без размытия), но это создает другую проблему - вертикальное центрирование внутреннего контейнера.

Любое решение? Нет jQuery, пожалуйста, просто чистый CSS.

Ответ 1

Я обнаружил, что размер тени не может быть установлен в процентах от родительского объекта

Правда. Но вы можете установить font-size для родительского объекта, затем определить размер объекта в em и использовать тот же em для определения размера box-shadow.

Или, если ваш родительский объект оказывается окном, вы можете использовать единицы просмотра: vw и vh.

Ответ 2

Если вам нужна вставка 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 - довольно полезный инструмент для генерации радиальных (среди прочих) градиентов вместе с необходимыми префиксами, если вы решите пойти по этому маршруту.

Ответ 3

Пробовали ли вы использовать блок rem (root em unit)? Я считаю, что вы можете использовать это, чтобы сделать его масштабируемым.

Модуль rem всегда относится к корневому элементу html, поэтому он будет масштабироваться соответствующим образом, и вам не придется беспокоиться о внутренних контейнерах или что-то в этом роде. На данный момент он также имеет довольно широкую поддержку браузера.

Я использую его в своих проектах, чтобы сделать их более отзывчивыми, но всегда следуйте параметру, уже определенному px или em, чтобы он не удался изящно на всякий случай. Например:

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

Вот отличная статья, объясняющая все, что вам нужно знать об этом устройстве: http://snook.ca/archives/html_and_css/font-size-with-rem

Ответ 4

Вы хотите, чтобы рамка-тень масштабировалась с шириной контейнера или с высотой контейнера? Вы не можете определить высоту и ширину своей тени, только спрэд. Поэтому, если ваш контейнер сжимается на 10% по ширине, но не сжимается по высоте, ваша тень будет уменьшаться на 10% (если это было возможно), т.е. Ваша высота тени будет масштабироваться, даже если она, вероятно, не должна.

Если вы хотите, чтобы рамка-тень действительно правильно масштабировалась относительно высоты и ширины, вам нужно было бы создать несколько теней - один для высоты, один для ширины.

Однако вы никогда не сможете масштабировать фактическую тень, только контейнер тени. Таким образом, вы должны создать контейнер внутри основного контейнера, а затем дать ему отрицательные поля и прикрепить коробку-тень. Тем не менее, вы скоро заметите, что ваша тень на самом деле растет вместо того, чтобы сокращаться при масштабировании контейнера.

Кажется немного переборщить, чтобы попытаться масштабировать что-то, что не масштабируется без использования медиа-запросов или 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>