Каково точное объяснение box-shadow и -moz-box-shadow в CSS?

Question

Я нахожу объяснения CSS box-shadow и -moz-box-shadown несколько неточными.

http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-box-shadow

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

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

Правда ли, что четвертая длина будет использовать тот же цвет (самый темный оттенок), и повторите это для указанной ширины?Таким образом, оно не будет плавно размытым?

Может ли оно достигнуть указания скорости размытия или скорости затухания ...?

Кто-то очень точно знает, как именно они работают?

Answer 1

Хорошо, представьте, что тень от блока начинается с блока такого же размера, что и содержимое, указанного цвета тени (скажем, черного для аргументации).

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

Два значения distance сместят его вверх, вниз, влево или вправо - так, чтобы оно "выглянуло" из-за содержимого. На этом этапе он все еще будет иметь такой же размер, как и его содержимое, и будет иметь острые края.

Значение spread приведет к расширению этого поля на указанную величину, поэтому оно будет на больше или меньше , чем его поле содержимого. Визуально, чем выше спред, тем дальше «назад» появляется тень (это создает иллюзию, что коробка находится далеко от поверхности, на которую отбрасывает тень).

Значение размытия просто приводит к плавному размытию краев на фоне, переходя от цвета тени к цвету фона.

НТН

Answer 2

Я не веб / CSS-программист, но мне нужен был алгоритм box-shadow, похожий на CSS, и я решил выяснить, как он работает.

Я использовал онлайн-инструмент CSSmatic для сравнения ниже.

Кажется, что алгоритм состоит из 2 шагов.

Шаг 1: Векторизация масштаба и сдвига

As shown, a 27px CSS spread inset means the shape is scaled to have dimensions 27*2 pixels smaller. This is inverted for outline box-shadows (e.g. 27*2 pixels larger).

The horizontal/vertical offsets are self-explanatory.

Step 2: Gaussian blur

History

Mozilla developer David Baron wrote a detailed article on CSS box-shadow implementations здесь .

Вплоть до 2011 года стандартного значения радиуса размытия CSS не было. Он может соответствовать разным алгоритмам и параметрам в разных веб-браузерах:

Различные браузеры ... исторически делали разные вещи для того же радиуса размытия, как с точки зрения алгоритма размытия и что радиус означает для этого алгоритма (то есть насколько размыто данный радиус делает вещи). .... За прошедший год спецификации CSS и HTML были изменены (для CSS), чтобы определить, что означает этот радиус размытия или (для HTML), чтобы они согласились друг с другом в этом определении.

Эти исторические различия могут объяснить назначение префикса moz- (который вы упомянули) и префикса webkit-. Скорее всего, они определяют альтернативные параметры box-shadow для браузеров Mozilla и WebKit .

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

Стандартизация

Согласно Барону, теперь существует точное , стандартное определение радиуса размытия рамки-тени:

Эффект размытия теперь определяется css3-background и HTML как гауссово размытие со стандартным отклонением (σ), равным половина заданный радиус размытия , с учетом разумной ошибки аппроксимации.

Математик может расширить это до точной формулы.

Визуальное приближение

Используя метод проб и ошибок в GIMP , я обнаружил, что радиус размытия по Гауссу получается умножением параметра размытия CSS на 5/3 (1,6666 ...), а затем округлением до ближайшего integer, производит очень близкое визуальное приближение (к CSS в Firefox 50):

7px CSS blur (Firefox 50) ~~ ceil(7 * 5/3.0) = 12.0 Гауссов радиус в GIMP

30px CSS blur (Firefox 50) ~~ ceil(30 * 5/3.0) = 50.0 Gaussian radius in GIMP

75px CSS blur (Firefox 50) ~~ ceil(75 * 5/3.0) = 125.0 Gaussian radius in GIMP

Implementation

Ivan Kuckir shares some быстрые алгоритмы размытия по Гауссу .