Радиус границы / Граница / box-shadow Advanced

Где я могу найти учебники по расширенным рамкам и теням в CSS?

Я обнаружил форму css, но не могу объяснить это:

#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }
<div id="space-invader"></div>

Ссылка

Кто-нибудь может объяснить мне, как это работает? Это для всех браузеров?

Спасибо.


css border box-shadow
person sall brown    schedule 20.08.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

  1. У элемента может быть несколько теней. Можно много добавить, как в примере

  2. Значения в первых двух позициях тянут тени по отношению к их родительскому объекту. Их можно рассматривать как координаты, где каждая тень блока является блоком, а значения в первых двух позициях являются его координатами.

  3. Вторая пара значений в позициях три и четыре определяет размытие тени и ее размер. Установив для них оба значения 0, тень будет иметь ровный край и будет иметь тот же размер, что и родительский элемент. Поскольку родительский элемент представляет собой блок размером 1em, это означает, что тень создает блок размером 1em.

  4. Значение em 1, установленное для родительского элемента, начинается с размера шрифта по умолчанию 16 пикселей в большинстве браузеров и создает квадрат со стороной 16 пикселей.

  5. Затем тени представляют собой все квадраты по 16 пикселей без размытия, смещенные на целое число ems, создавая блочный результат.

Давайте посмотрим на отредактированный пример. Здесь сразу видно, что изменение размера шрифта в родительском элементе изменяет размер блоков, поскольку em работает с размером шрифта. Мы также видим, что можем установить цвет квадратов, изменив тени отдельных блоков.

Другой блок был сделан размытым путем изменения радиуса размытия тени блока, а другой был сделан намного больше, опять же, ems использовались для демонстрации наследования размера с этим блоком.

Наконец блок перемещается в неправильную координату

#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 1em 0 #5f5, /* BLURRED */
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    12em -1em 0 0 red, /* MOVED OUT OF POSITION */
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 blue, /* COLOURED */
    -4em 1em 0 0 red,
    4em 1em 0 0 blue,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 2em #666, /* MADE LARGER */
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;
font-size: 12px;

    margin: 100px;
  }
<div id="space-invader"></div>

Вот еще немного о ems: http://www.impressivewebs.com/understanding-em-units-css/ https://css-tricks.com/why-ems/

И еще немного о тени блока: https://css-tricks.com/almanac/properties/b/box-shadow/

И последнее замечание: этот код довольно стабилен в браузерах. Box Shadow (даже без префиксов) очень хорошо поддерживается, а ems существует с года. точка, они даже предпочтительнее пикселей в IE6

person Toni Leigh    schedule 20.08.2015

arrow_upward
2
arrow_downward

когда вы вставляете новые параметры "...0 1em 0 1em красный, -2.5em 1.5em 0.5em красный,...", вы создаете новые тени с установленными вами характеристиками. Возьмем пример: 0 1em 0 1em красный. Первый параметр задает горизонтальное положение тени относительно div. Положительные значения означают приращение вправо, а отрицательные — влево. Второй параметр задает вертикальное положение. Положительное означает более низкое, а отрицательное означает более высокое. Следующие параметры — это размытие, распространение и цвет тени.

Когда вы размещаете тени в определенных позициях, вы можете нарисовать любое изображение.

Для получения дополнительной информации см.:http://www.w3schools.com/cssref/css3_pr_box-shadow.asp И я полагаю, что вы получили космический вторжение от: http://joshnh.com/weblog/drawing-things-with-box-shadow/

person Felipe C Vieira    schedule 20.08.2015