Радиус границы / Border / 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>

Ссылка на сайт

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

Thanx.

Источник

2 ответа

Решение

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

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

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

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

  5. Затем тени представляют собой квадраты 16px без размытия, смещенные на целое число 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

Источник

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

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

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

Источник
Другие вопросы по тегам