Размер тени блока CSS3 — процентные единицы?

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

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

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

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

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

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

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

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

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

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

Например, приведенный ниже код CSS делает «радиус распространения» тени блока равным 20% ширины div:

div {
    --width: 100px;
    width: var(--width);
    box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}

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

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

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

Кажется немного излишним пытаться масштабировать что-то, что не масштабируется без использования медиа-запросов или jQuery.

Однако, если вы ищете масштабируемые границы, то есть box-shadow без размытия :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>