Содержание статьи
Введение
Во время конференции Frontend в Цюрихе Цюрих Рейчел Эндрю рассказала о . Разблокирование силовой структуры сетки CSS . В конце своего разговора она упомянула о старой структуре CSS, которая застряла у меня в голове:
«Изображение настроено вокруг, используя хорошо поддерживаемый граничный радиус. Не забывайте, что старый CSS все еще существует и полезен. Вам не нужно использовать что-то фантастическое для каждого эффекта ». — Рэйчел Эндрю
Вскоре после того, как я услышал этот разговор, я подумал, что вы, конечно, могли бы создать больше, чем просто круги, и начал копать глубже в то, что может быть
Освоение пограничного радиуса
Одно значение
Начнем с основ. Надеюсь, это вас не утомляет. Вероятно, вы знакомы с CSS, и вы также знаете пограничный радиус. Он существует уже несколько лет, в основном используется с одним значением: border-radius: 1em и, возможно, это одна из самых обсуждаемых / любимых функций CSS3 еще в 2010 году, когда css3please.com был вашим лучшим друг
. Когда вы используете только одно значение, все углы округляются по этому значению:
Как вы можете видеть в примере выше, рядом с фиксированными значениями длины, такими как px rem или em вы также можете использовать проценты. В основном они используются для создания круга, устанавливая граничный радиус до 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его на прямоугольнике, у вас больше не будет симметричных углов. Вот пример, показывающий разницу между пограничным радиусом : 110px и border-radius: 30% примененным к прямоугольнику.
Четыре разных значения
Когда вы используете более одного значения, вы начинаете устанавливать значения для каждого угла, начиная в верхнем левом углу, а затем перемещение по часовой стрелке.
Восемь значений, разделенных косой чертой (это интересно)
Я думаю, что вы можете использовать проценты, и вы также можете смешивать проценты с фиксированными значениями. большинство из вас уже сделали все, что я объяснил выше. Теперь мы добираемся до захватывающей части. Что произойдет, если вы разделите значения косой чертой и укажите до восьми значений? Давайте посмотрим, что говорит об этом spec:
«Если значения заданы до и после косой черты, то значения перед косой чертой устанавливают горизонтальный радиус и значения после косой черты устанавливают вертикальный радиус. Если нет косой черты, тогда значения равны для обоих радиусов. «W3C
Итак, значения перед косой чертой отвечают за горизонтальные расстояния, тогда как значения после косой черты определяют вертикальные длины. Но что это значит? Помните процентные значения на прямоугольных фигурах? У нас были разные абсолютные значения для вертикальных и горизонтальных расстояний и асимметрично закругленных углов, и это именно то, что вы получаете, когда используете синтаксис слэш .
Итак, когда вы сравниваете радиус: 4em 8em до border-radius: 4em / 8em . Результаты совершенно разные.
Формы, которые вы получаете с этим, выглядят немного странно, если честно. Но помните круги, которые вы создаете с границей: 50% . Вы получаете круг, поскольку оба значения, определяющие одну сторону, составляют до 100% (50% + 50% = 100%), и прямой линии нет, что напоминает вам первоначальный квадрат. Если вы применяете ту же логику к синтаксису радиуса с восемью значениями, вы можете создать форму, которая немного похожа на плектр или органическую ячейку:
Не паникуйте … мы создали визуальный генератор для вас
Мне понадобилось некоторое время, чтобы привыкнуть к этому синтаксису. Каким-то образом это не интуитивно. [1945908]
Загрузка...
