Border radius с одной стороны: border-radius | htmlbook.ru — Вебджем.рф

Содержание

border-radius — CSS | MDN

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

Это свойство является короткой записью для четырёх свойств border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) иborder-bottom-left-radius (en-US).

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse.

Примечание: Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться.

Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */
/* Скругление применяется ко всем четырём углам */
border-radius: 10px;
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;
/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */
/* (первые значения радиуса) /радиус */
border-radius: 10px 5% / 20px;
/* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
/* Глобальные значения */
border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического скругления.

Значения

<length>: Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
<percentage>: Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

border-radius: 1em/5em;
/* ... эквивалентно этому: */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;
/* . .. эквивалентно этому: */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Формальный синтаксис

Error: could not find syntax for this item

  <pre>
border: solid 10px;
border-radius: 10px 40px 40px 10px;
  </pre>
  <pre>
border: groove 1em red;
border-radius: 2em;
  </pre>
  <pre>
background: gold;
border: ridge gold;
border-radius: 13em/3em;
  </pre>
  <pre>
border: none;
border-radius: 40px 10px;
background: gold;
  </pre>
  <pre>
border: none;
border-radius: 50%;
background: burlywood;
  </pre>
  <pre>
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  </pre>
  <pre>
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
  </pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}
pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}
pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}
pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}
pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}
pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}
pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}
pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Пример 1: http://jsfiddle. net/Tripad/qnGKj/2/
Пример 2: http://jsfiddle.net/Tripad/qnGKj/3/
Пример 3: http://jsfiddle.net/Tripad/qnGKj/4/
Пример 4: http://jsfiddle.net/Tripad/qnGKj/5/
Пример 5: http://jsfiddle.net/Tripad/qnGKj/6/

Спецификация	Статус	Комментарий
CSS Backgrounds and Borders Module Level 3 Определение ‘border-radius’ в этой спецификации.	Кандидат в рекомендации	Изначальное определение

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Относящиеся к Border-radius CSS-свойства: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)

Last modified: 000Z»>13 авг. 2022 г., by MDN contributors

Как сделать border radius только с одной стороны

border-radius CSS

Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.

Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:

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

Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.

В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:

Общая информация и примечания

Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:

Но иногда цвет фона элемента может « просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

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

Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:

В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.

Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.

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

Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:

Если высота и ширина элемента не равны, мы получим эллиптическую форму:

Официальный синтаксис

Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.

Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .

Значения

Неофициальный синтаксис webkit border radius CSS :

В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.

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

Поддержка браузерами

Свойство CSS3 Border-radius (закругленные углы)

Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS , а также полных свойств ( например, `border-top-left-radius` ).

CSS: интересные возможности border-radius

Что можно сделать с помощью CSS-свойства border-radius ? Автор материала, перевод которого мы публикуем, говорит, что больше, чем кажется на первый взгляд. В частности, речь идёт о том, что углы элементов, скруглённые с помощью этого свойства, могут иметь весьма интересную форму.

Старые свойства и современный веб-дизайн

В этом году, на Frontend Conference Zurich, Рэйчел Эндрю сделала доклад о возможностях технологии CSS Grid. В конце выступления она сказала кое-что о старых CSS-свойствах и её слова меня зацепили. А именно звучало это так: «Изображение сделано круглым исключительно с использованием хорошо поддерживаемого свойства border-radius . Не забывайте о том, что старый CSS всё ещё существует и всё ещё может приносить пользу. Вам не обязательно всегда пользоваться чем-то совершенно новым для создания каких-либо эффектов».

Через некоторое время после этого выступления мне в голову пришла мысль о том, что круг— это лишь малая часть того, что можно сделать с помощью border-radius . Увлечённый этой идеей, я решил как следует разобраться с этим свойством.

Освоение border-radius

▍Единственное значение

Начнём с основ. Надеюсь, вы на этом примере не заскучаете. Вы, возможно, знакомы с CSS, да и со свойством border-radius — тоже. Оно существует уже довольно давно, и пользуются им, в основном, указывая единственное значение. Выглядит это так: border-radius: 1em . Возможно, это было одной из самых обсуждаемых возможностей CSS3 в 2010-м, когда лучшим другом дизайнера был сайт css3please.com.

При использовании единственного значения для border-radius углы элемента скругляются в соответствии с этим значением.

Скругление всех углов квадрата в соответствии с единственным значением border-radius

Как видно из вышеприведённого примера, задавать фиксированные значения можно не только указывая после чисел некие единицы измерения, вроде px , rem или em , но и знак процента. Обычно это используется для создания окружностей на основе квадратов, когда border-radius устанавливают в 50%. Процентное значение основано на ширине и высоте элемента. Поэтому, когда его применяют к прямоугольникам, получившиеся углы симметричными не будут. Вот пример, демонстрирующий разницу между свойствами border-radius: 110px и border-radius: 30% , применёнными к прямоугольнику.

Скругление углов прямоугольника

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

▍Четыре отдельных значения

При использовании более чем одного значения border-radius , вы настраиваете параметры для каждого угла, начиная с верхнего левого и продвигаясь по часовой стрелке. Тут, опять же, можно использовать процентные значения. Их, кроме того, можно смешивать с фиксированными значениями.

Настройка параметров для четырёх углов элемента

▍Восемь значений, разделённых косой чертой

Думаю, многие из вас уже попробовали всё, о чём мы говорили выше. Теперь настало время для по-настоящему интересных экспериментов. Что произойдёт, если значения разделить с помощью косой черты и указать до восьми таких значений? Для начала взглянем на спецификацию. Она говорит нам о том, что если значения заданы до и после косой черты, тогда значения до косой черты задают горизонтальный радиус, а значения после — вертикальный. Если косой черты нет, то оба радиуса будут одинаковыми.

Итак, значения до косой черты ответственны за горизонтальные расстояния, а значения после косой черты — за вертикальные. Всё это хорошо, но тут возникает закономерный вопрос: «А о чём вообще идёт речь?». Помните процентные значения скругления углов, задаваемые для прямоугольных фигур? Там были применены разные абсолютные значения для вертикальных и горизонтальных расстояний и присутствовали асимметрично скруглённые углы. Именно такого эффекта можно добиться, используя косую черту при настройке border-radius .

Давайте сравним эффекты, которые дают следующие настройки: border-radius: 4em 8em и border-radius: 4em / 8em . Результаты получатся очень разными.

Симметричные углы левого элемента представляют собой четверть окружности, а асимметричные углы левого элемента являются частями эллипса

Если честно, фигуры, полученные в результате применения вышеописанных настроек, выглядят странновато. Однако не забывайте о том, что окружности создаются с помощью таких параметров: border-radius: 50% . Окружность получается из-за того, что два значения, задающие одну сторону, складываются и получается 100% (50% + 50% = 100%) и прямых линий от исходного квадрата не остаётся. Если порассуждать в том же духе о восьми значениях, используемых при задании свойства border-radius , то окажется, что с их помощью можно описать фигуру, которая похожа на гитарный медиатор или на клетку живого организма.

Фигура, полученная в результате применения 8 значений, разделённых косой чертой

Четыре перекрывающихся эллипса, формирующих фигуру

Мне потребовалось некоторое время на то, чтобы к этому привыкнуть. Порой все эти конструкции бывает сложно осмыслить. Если вас привлекают сложные формы элементов, настраиваемые с помощью border-radius , можете воспользоваться этим небольшим инструментом.

Итоги

Теперь, когда вы знаете о том, что при настройке border-radius можно использовать 8 значений, то, вы, если попробовали вышеупомянутый инструмент, можете ощутить лёгкое разочарование, так как он не даёт возможности управлять каждым значением независимо. Если это так — то вот, специально для вас, его версия, поддерживающая независимую настройку всех восьми значений. Прежде чем вы им воспользуетесь — вспомните один разговор из фильма «Охотники за привидениями» 1984-го года:

— Не скрещивайте потоки.
— Почему?
— А то будет плохо.

Дело в том, что если вы переместите манипуляторы так, что они пересекутся на одной стороне фигуры, то она начнёт вести себя… Скажем так — она начнёт вести себя непредсказуемо. Да что там говорить — посмотрите сами. В конце концов, это не приведёт к вселенской катастрофе, но, делая это, помните о том, что мы вас предупредили.

Уважаемые читатели! Пользуетесь ли вы CSS-свойством border-radius?

border — radius

Свойство border — radius закругляет углы почти у любого элемента. И даже если у блока не задана явная рамка.

Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.

Пример

Самая простая штука — кнопка с закруглёнными краями:

Обрати внимание, что мы сбросили стандартную рамку кнопки, но углы тем не менее слегка закруглились.

Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет «нажиматься» — получится привлекательно и современно

Как это понять

Свойство border — radius задаёт радиус закругления каждого из углов элемента.

Если значение задано в процентах, то оно будет высчитываться от размеров элемента: горизонтальные размеры будут высчитываться от ширины элемента, а вертикальные — соответственно, от высоты (поэтому для квадратного элемента можно задать border — radius : 50 % , чтобы сделать его круглым).

Как пишется

Пройдёмся по синтаксису:

Можно управлять степенью закругления каждого из углов в отдельности или задать одно значение для всех углов сразу. Причём значение на самом деле состоит из двух — скругления по горизонтальной оси и по вертикальной. Чтобы явно задать скругление для каждой из осей (т. е. получить не круглое значение, а эллипсоидное), это значение следует записывать через символ / :

Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:

Подсказки

Значение по умолчанию: 0 .

border — radius сработает даже если не будет задана видимая рамка.

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

Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:

border — top — left — radius — радиус закругления для левого верхнего угла.
border — top — right — radius — радиус закругления для правого верхнего угла.
border — bottom — right — radius — радиус закругления для правого нижнего угла.
border — bottom — left — radius — радиус закругления для левого нижнего угла.

На практике

Realetive

Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, border — radius : 9999px . Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:

Алёна Батицкая

Самый крутой лайфхак — это круглые элементы при помощи border — radius . Они часто нужны для всяких лейблов на странице.

3 CSS метода для добавления границ элементов

Когда дело доходит до CSS, иногда border не совсем border.

В этой статье мы рассмотрим различия между:

border
outline
box-shadow

Мы также обсудим, когда вы можете использовать одно вместо другого.

Обновление модели CSS Box

Ключевое различие между нашими тремя методами границы заключается в том, где они размещаются на элементе и как влияют на его размеры. Это поведение контролируется блочной моделью CSS.

border это именно граница элемента, находящаяся между его заполнением и краем, и ее ширина будет влиять на вычисленные размеры элемента
outline находится рядом, но вне border, перекрывая оба box-shadow и margin, но не влияя на размеры элемента
по умолчанию box-shadowпростирается от края границы, покрывая пространство в указанном направлении (ах), и он также не влияет на размеры элемента

Синтаксис и использование border

Границы были стандартом дизайна с самого начала Интернета.

Важное отличие от двух других методов, которые мы собираемся рассмотреть, заключается в том, что по умолчанию границы включены в вычисляемые размеры элемента. Даже если вы установите box-sizing: border-box, границы все равно будут фигурировать в расчетах.

Самый важный синтаксис рамки определяет ее ширину и стиль:

border: 3px solid;

Если не определено, будет использоваться цвет по умолчанию currentColor, что означает, что будет использоваться ближайшее определение для color в каскаде.

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

Когда использовать border

border — хороший выбор, когда допустимо вычисление стиля в размерах элемента. А стили по умолчанию обеспечивают большую гибкость дизайна.

Синтаксис и использование outline

Для outline единственное обязательное свойство, чтобы сделать его видимым — это указать стиль, поскольку по умолчанию это none:

outline: solid;

Как и border, он приобретет цвет через currentColor, и его ширина будет по умолчанию medium.

Типичное применение outline — это встроенные стили браузера :focus для интерактивных элементов, таких как ссылки и кнопки.

Этому конкретному приложению должно быть разрешено запускаться в целях доступности, если вы не можете предоставить собственный стиль :focus, который соответствует критерию успеха WCAG 2.4.7 Focus Visible.

В целях проектирования часто отмечается проблема, связанная с невозможностью outline наследовать кривую ни от одного стиля border-radius.

Когда использовать outline

Использование outline может быть желательным, когда вы не хотите влиять на размеры элемента, и вам не нужно, чтобы он использовал border-radius.

Синтаксис и использование box-shadow

Минимальные требуемые свойства для box shadow являются значениями для x и y оси, и его цвет:

box-shadow: 5px 8px black;

При желании добавьте третий блок для создания blur и четвертый для добавления spread.

Чтобы использовать его для создания границы, мы устанавливаем значения оси x и y а также blur значение 0. Затем установите положительное число для spread:

box-shadow: 0 0 0 3px blue;

Это создаст вид границы вокруг элемента и может даже следовать за примененным border-radius:

Когда использовать box-shadow

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

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

Однако он не сможет полностью имитировать некоторые стили, предоставляемые border и outline.

Собираем все вместе

Вот несколько практических сценариев, когда вам может потребоваться border альтернативный вариант.

Границы кнопок

Обычный случай реальной проблемы border — это предоставление стилей как для кнопок с рамкой, так и для кнопок без рамки, а также сценарий их выстраивания рядом друг с другом.

Типичным решением является увеличение размера кнопки без рамки до размера border-width.

Альтернативное решение с нашими новыми знаниями — использовать box-shadow вместе с ключевым словом inset для визуального размещения псевдокадровки внутри кнопки:

Обратите внимание, что ваш отступ должен быть больше border-width, чтобы предотвратить перекрытие текстового содержимого.

В качестве альтернативы, возможно, вы хотите добавить рамку на :hover или :focus. Используя реальное изображение border, вы получите нежелательный визуальный скачок при сдвиге макета, так как border ненадолго увеличит размеры в этих состояниях.

В этом случае мы можем использовать box-shadow для создания псевдо-границы, чтобы истинные размеры не увеличивались, плюс мы можем анимировать ее, используя transition:

Вот сокращенный код для приведенного выше примера:

button {
  transition: box-shadow 180ms ease-in;
}
button:hover {
  box-shadow: 0 0 0 3px tomato;
}

Обновление метода отладки CSS

Классическая шутка CSS заключается в том, что для решения проблем CSS, особенно при прокрутке или позиционировании переполнения, нужно добавить:

* { border: 1px solid red }

Это добавит красную рамку к каждому элементу.

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

Вместо этого используйте:

* { outline: 1px solid red; }

Одним из возможных последствий использования border является добавление полос прокрутки после перерисовки содержимого. При использовании outline этого побочного эффекта не будет.

Кроме того, вы, вероятно, уже будете использовать border для элементов, поэтому повсеместное изменение border приведет к сдвигам макета, которые, безусловно, могут вызвать новые проблемы.

Обеспечение видимого фокуса

Что касается доступности, один сценарий, о котором вы можете не знать — это пользователи режима высокой контрастности Windows (WHCM).

В этом режиме предоставленные вами цвета удаляются в уменьшенную высококонтрастную палитру. Не все свойства CSS разрешены, в том числе box-shadow.

Одно практическое влияние является то, что если вы удалили outline в :focus и заменить его box-shadow, пользователи WHCM больше не будет уделять внимание фокусу.

Чтобы устранить это негативное влияние, вы можете нанести transparent контур :focus:

button:focus {
  outline: 2px solid transparent;
}

Подводные камни outlineи box-shadow

Поскольку outline и box-shadow находятся за пределами границы в блочной модели, вы можете столкнуться с одним из последствий, когда они исчезают за краями области просмотра. Таким образом, вам, возможно, потребуется добавить margin к элементу или padding к body в качестве контрмеры, если вы хотите, чтобы он оставался видимым.

Их размещение также означает, что они могут быть отделены такими свойствами, как overflow: hidden или использование clip-path.

Дополнительный совет: Градиентные границы

Как и было обещано, вот дополнительный совет о том, что — из методов, которые мы обсуждали — может делать только один border.

Часто забываемое свойство, связанное с границами, border-image. Синтаксис может быть немного странным при попытке использовать его с реальными изображениями.

Но в нем есть скрытая сила — он также позволяет создавать границы градиента, поскольку градиенты CSS технически являются изображениями:

Для этого необходимо определить обычную ширину и стиль границы (хотя они будут отображаться только в виде solid независимо от значения стиля), а затем свойство border-image, которое может использовать синтаксис градиента с одним добавлением. Число после градиента — это значение slice, которое для нашего градиента мы можем просто использовать 1, чтобы практически не изменять размер / искажение градиента.

div {
  border: 10px solid;
  /* simplified from preview image */
  border-image: linear-gradient(to right, purple, pink) 1;
}

Чтобы разместить границу только с одной стороны, сначала обязательно установите нулевые значения для других сторон, иначе некоторые браузеры все равно будут добавлять ее со всех сторон:

div {
  border-style: solid;
  border-width: 0;
  border-left-width: 3px;
  /* border-image */
}

Рамки со скругленными углами.

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Рамки со скругленными углами

Рамки с прямоугольными углами встречаются очень часто и уже успели намозолить глаза. Вот рамки со скругленными углами — другое дело!

Расширения CSS — moz-border-radius-topleft (Firefox), border-top-left-radius (Opera и стандарт CSS 3) и — webkit-border-top-left-radius (Web-обозреватели на программном ядре Webkit) задают радиус скругления верхнего левого угла рамки:

— moz-border-radius-topleft|border-top-left-radius|

— webkit-border-top-left-radius: <значение 1> [<значение 2>]

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

Для указания радиуса скругления остальных углов рамки предназначены расширения CSS, перечисленные далее.

— moz-border-radius-topright (Firefox), border-top-right-radius (Opera и стандарт CSS 3) и — webkit-border-top-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления верхнего правого угла рамки.

— moz-border-radius-bottomright (Firefox), border-bottom-right-radius (Opera и стандарт CSS 3) и — webkit-border-bottom-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего правого угла рамки.

— moz-border-radius-bottomleft (Firefox), border-bottom-left-radius (Opera и

стандарт CSS 3) и — webkit-border-bottom-left-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего левого угла рамки.

Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела (листинг П1).

Листинг П1

#cheader { width: 1010px;

padding: 0 20px;

border-bottom: medium dotted;

— moz-border-radius-bottomleft: 2px;

— moz-border-radius-bottomright: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;

— webkit-border-bottom-left-radius: 2px;

— webkit-border-bottom-right-radius: 2px }

Здесь мы задаем для контейнера cheader рамку, состоящую из одной нижней стороны, имеющую радиусы скругления нижнего левого и нижнего правого углов, равные двум пикселам, сразу для всех Web-обозревателей, поддерживающих эту возможность. Таким образом, и Firefox, и Opera, и Web-обозреватели на программном ядре Webkit выведут эти углы рамки скругленными.

Расширения CSS — moz-border-radius (Firefox), border-radius (Opera и стандарт CSS) и — webkit-border-radius (Web-обозреватели на программном ядре Webkit) позволяют задать радиусы скругления сразу для всех углов рамки:

— moz-border-radius|border-radius|-webkit-border-radius:

<позиция 1 значение 1>[/<позиция 1 значение 2>] [<позиция 2 значение 1>[/<позиция 2 значение 2>][<позиция 3 значение 1>[/<позиция 3 значение 2>] [<позиция 4 значение 1>[/<позиция 4 значение 2>]]]]

Как видим, каждая позиция может содержать как одно значение, так и пару значений, разделенных слэшем /. Если она содержит одно значение, это значение задаст радиус скругления и по горизонтали, и по вертикали. Если же в позиции указать два значения, разделив их слэшем, первое задаст радиус скругления по горизонтали, второе — по вертикали.

Кроме того, можно указать от одной до четырех позиций.

— Если указана одна позиция, она задаст радиус скругления всех углов рамки.

— Если указаны две позиции, первая задаст радиус скругления верхнего левого и нижнего правого углов рамки, а вторая — верхнего правого и нижнего левого углов.

— Если указаны три позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого и нижнего левого, а третья — нижнего правого угла.

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

Пример иллюстрирует листинг П2.

Листинг П2

#navbar LI { padding: 5px 10px;

margin: 10px 0px;

border: thin solid #B1BEC6;

— moz-border-radius: 3px/1px 3px/1px 0px 0px;

border-radius: 3px/1px 3px/1px 0px 0px;

— webkit-border-radius: 3px/1px 3px/1px 0px 0px;

cursor: pointer }

Здесь мы задаем для пунктов «внешних» списков, формирующих полосу навигации, рамки со скругленными верхними углами. Радиус скругления их по горизонтали будет 3 пиксела, а по вертикали — 1 пиксел.

Данный текст является ознакомительным фрагментом.

ГЛАВА 11. Отступы, рамки и выделение

ГЛАВА 11. Отступы, рамки и выделение В предыдущей главе мы занимались контейнерным Web-дизайном: создавали блочные контейнеры, помещали в них содержимое и задавали для них параметры с помощью особых атрибутов стиля CSS. Результат — вполне профессионально созданная

Параметры рамки

Параметры рамки CSS также позволяет нам создать сплошную, пунктирную или точечную рамку по воображаемой границе элемента Web-страницы.Атрибуты стиля border-left-width, border-top-width, border-right-width и border- bottom-width задают толщину, соответственно, левой, верхней, правой и нижней сторон

Многоцветные рамки

Многоцветные рамки Мы уже знаем, что с помощью особых атрибутов стиля CSS можно создавать одноцветные рамки у любых элементов Web-страницы. Однако для рамок, толщина которых превышает один пиксел, мы можем задать сразу несколько цветов. В этом случае рамка будет представлена

Рамки со скругленными углами

Рамки со скругленными углами Рамки с прямоугольными углами встречаются очень часто и уже успели намозолить глаза. Вот рамки со скругленными углами — другое дело!Расширения CSS — moz-border-radius-topleft (Firefox), border-top-left-radius (Opera и стандарт CSS 3) и — webkit-border-top-left-radius (Web-обозреватели на

Выделение со скругленными углами

Выделение со скругленными углами Сказавший «а» да скажет «б»! Позволивший создавать рамки со скругленными углами да позволит скруглять углы у выделения!Расширение CSS — moz-outline-radius-topleft задает радиус скругления верхнего левого угла выделения:— moz-outline-radius-topleft:

7.

1. Общие рамки

7.1. Общие рамки Более радикальные законопроекты внесены в ряде стран, включая Великобританию, ЮАР, Тайвань, Перу, Венесуэлу, Украину. Они предполагают перевод всего государственного ИТ-хозяйства на свободные программы. Основной аргумент достаточно прост: любая форма

ГЛАВА 11. Отступы, рамки и выделение

Параметры рамки

Многоцветные рамки

Выделение со скругленными углами

7. Временные рамки

7. Временные рамки «Как сделать что-то за 15 минут» – это может быть небольшая статья, где вы даете алгоритм решения той или иной проблемы за три минуты. Это очень хорошее название для статей и видео. Вы планируете записать бесплатный каст на 15 минут, в котором

Buttons & Frames (Кнопки и рамки)

Buttons & Frames (Кнопки и рамки) Фильтры этой группы будут полезны, в первую очередь, пользователям, занимающимся веб-дизайном и часто создающим кнопки различной формы. Также эти фильтры можно использовать для создания рамок, изображения (рис. 10.3). Каждый из предложенных в

Frames (Рамки)

Frames (Рамки) С их помощью можно создать мраморную, деревянную, каменную рамки. Фильтры группы Frames, Textured (Рамки, рисунки) позволяют создавать рамки с различным повторяющимся рисунком. Общее количество предложенных фильтров этого типа очень велико – около 50, что дает

Настройка рамки фокуса

Настройка рамки фокуса Если кнопка или поле получает фокус, то вокруг него появляется рамка в один пиксел. Существует возможность изменения ширины данной рамки по вертикали и горизонтали. Для этого достаточно указать новые размер рамки (в пикселах) в двух параметрах

Дорогу киборгам! Кибатлон и рамки разумного Евгений Золотов

Дорогу киборгам! Кибатлон и рамки разумного Евгений Золотов Опубликовано 31 марта 2014 Только что отшумели Параолимпийские игры — крупнейшее спортивное мероприятие для людей с ограниченными физическими и умственными возможностями. Официальным

Изучаем CSS: свойство border (с примерами)

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «CSS border with examples tutorial».

Photo by form PxHere

Всем привет! Сегодня мы поговорим о… границах!

CSS-свойством border вы, вероятно, пользуетесь практически ежедневно (если, конечно, занимаетесь фронтендом).

Я нашел несколько полезных приемов использования свойства border, которыми хочу поделиться с вами. Польза их неравнозначна: одни явно полезнее других, а некоторые просто забавные.

1. Анимированный border

Допустим, нам нужно сделать какой-то элемент более заметным. Как быть? Давайте анимируем его!

Мы можем анимировать границы, даже не меняя размеры самих элементов. Это очень просто. Все, что нужно, это использовать соответствующий параметр в CSS-коде. Давайте посмотрим пример:

See the Pen CSS Borders 1# Animated Border by Duomly programming courses (@duomly) on CodePen.

2. Границы элемента, обозначенные изображениями

Можете представить себе границу элемента в виде пончиков? А ведь ее без труда можно сделать на чистом CSS. Для этого нужно использовать атрибут border-image.

See the Pen CSS Borders 2# Border images by Duomly programming courses (@duomly) on CodePen.

3. Граница в «змеином» стиле

Если нам нужно, чтобы граница элемента прямо бросалась в глаза, можно сделать ее двухцветной. Цвета при этом можно выбирать по вкусу.

See the Pen CSS Borders 3# Snake style border by Duomly programming courses (@duomly) on CodePen.

4. Ступенчатая граница

Вы когда-нибудь пробовали создать border в 3d-стиле? Добавить элементу глубину за счет применения разных оттенков одного цвета очень легко. Для этого нам понадобятся несколько box-shadow:

See the Pen CSS Borders 4# Stairs style border by Duomly programming courses (@duomly) on CodePen.

5. CSS-border, состоящий из одной лишь тени

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

Мучениям пришел конец!

Мы можем создать границу вокруг нашего элемента при помощи box-shadow. Посмотрите, как это реализовано в примере:

See the Pen CSS Borders 5# Only shadows border by Duomly programming courses (@duomly) on CodePen.

6. Граница с тенью и контуром

Создать «змеиный» стиль границы можно несколькими способами. Например, применяя свойства box-shadow и outline в CSS-коде нашего элемента.

See the Pen CSS Borders 6# Shadow and outline by Duomly programming courses (@duomly) on CodePen.

7. Несколько теней и контур

В одной границе можно сочетать даже несколько цветов и элементов. Такой эффект достигается применением все тех же свойств box-shadow и outline. Давайте немного поэкспериментируем:

See the Pen CSS Borders 7# Few shadows and outline by Duomly programming courses (@duomly) on CodePen.

8. Двойной border с box-shadow

Мы можем смешать границу как таковую с тенью и контуром. Таким образом можно создать прекрасный эффект пунктира, как в примере ниже.

See the Pen CSS Borders 8# Duoble border and outline by Duomly programming courses (@duomly) on CodePen.

9. Разноцветная граница

Что, если мы хотим раскрасить границу элемента еще сильнее, чем в предыдущих примерах? Можно установить разные цвета для всех сторон. Для этого нам нужно поработать с фоном и градиентом.

See the Pen CSS Borders 9# Multi color border by Duomly programming courses (@duomly) on CodePen.

Тестируйте, экспериментируйте и делитесь в комментариях собственными рецептами оформления границ.

Как сделать гибкие эллипсы — Как создать сайт

Как сделать гибкие эллипсы

Проблема

Вероятно, вы замечали, что любой квадратный элемент, для которого определено достаточно большое значение border-radius , можно превратить в круг с помощью примерно такого CSS-кода:
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= половины длины стороны */
Возможно, вы также замечали, что в подобной ситуации можно было бы указать любое значение радиуса больше 100px и все равно получить в результате круг. Причина объясняется в спецификации: Если сумма любых двух радиусов соседних рамок превышает размер поля рамки, пользовательские агенты должны пропорционально уменьшать используемые значениях всех радиусов рамки, чтобы наложения не происходило.

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

В этом случае мы хотим, чтобы на выходе получался эллипс в ситуации, когда ширина и высота не равны между собой, и круг, когда они совпадают. Однако наш предыдущий код не способен обработать такой сценарий. Результирующая фигура для случая, когда ширина больше высоты, показана на рисунке. Можно
ли в принципе создавать эллипсы с помощью border-radius , не говоря уже о том, чтобы делать их гибкими?

Решение

Этот факт не слишком известен, но свойство border-radius способно принимать разные значения для горизонтального и вертикального радиуса, разделенные слешем (/). Это позволяет создавать эллиптическое скругление в углах элемента. Таким образом, если у нас есть элемент размером, скажем, 200px × 150px , то мы могли бы превратить его в эллипс, указав радиусы, равные половине ширины и высоты соответственно:
border-radius: 100px / 75px;
Результат вы можете видеть

Однако у этого подхода есть один крупный недостаток: если габаритные размеры элемента меняются, то и значения border-radius также требуют корректировки. На рисунке ниже вы можете видеть, как то же определение свойства border-radius работает с элементом размером 200px × 300px . Габариты элемента, меняющиеся в зависимости от содержимого, создают проблему.

Или нет? У border-radius есть еще одна малоизвестная особенность: это свойство принимает не только абсолютные, но и процентные значения. Процентное значение разрешается в соответствующее габаритное значение: горизонтальный радиус определяет ширину, а вертикальный радиус определяет высоту. Это означает, что одни и те же процентные значения могут превращаться в разные значения горизонтального и вертикального радиуса. Следовательно, для того чтобы получить гибкий эллипс, следует заменить оба радиуса значением 50% :
border-radius: 50% / 50%;
И так как составляющие до и после слеша теперь равны (несмотря на то, что в итоге они разрешаются в разные значения), мы можем дополнительно упростить код:
border-radius: 50%;
Результат — гибкий эллипс, определяемый всего лишь одной строкой CSS-кода, независимо от его фактической ширины и высоты.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/ellipse
Многие задаются вопросом, почему свойство border-radius получило именно такое название, ведь для того, чтобы оно работало, никакие рамки (border) не требуются. Казалось бы, corner-radius было бы намного более подходящим названием. Причина существования такого (заведомо сбивающего с толку) названия заключается в том, что border-radius скругляет углы поля рамки элемента. Если у элемента нет рамок, то это ни на что не влияет, но если рамки имеются, то скругляется внешний угол именно рамки. Внутренний угол подвергается меньшему скруглению (max(0,border-radius — border-width), если быть точными).

Полуэллипсы

Теперь, когда мы знаем, как с помощью CSS создавать гибкие эллипсы, естественным образом возникает вопрос: можно ли посредством CSS-кода рисовать и другие распространенные фигуры, такие как дуги эллипса? Давайте на мгновение задумаемся, что же такое половина эллипса.

Она симметрична относительно вертикальной оси, но не относительно горизонтальной оси. И даже если нам пока неизвестны точные значения border-radius (при условии, что их вообще можно узнать), уже очевидно, что нам потребуются разные значения радиуса для каждого из углов. Однако пока что мы умеем задавать лишь одно значение для всех четырех углов.

К счастью, синтаксис border-radius намного более гибкий. Возможно, вы удивитесь, но border-radius — это в действительности сокращение. На самом деле мы можем указать разные значения для всех четырех углов, к тому же сделать это можно двумя способами. Первый способ — использовать полную запись свойств, составляющих это сокращение:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Второй способ позволяет создавать более емкий код, так как подразумевает использование все того же сокращения border-radius , но на этот раз с несколькими значениями, разделенными пробелами.

Если указать четыре значения, то они будут применены к каждому из четырех углов по часовой стрелке, начиная с верхнего левого. Если указать меньше четырех значений, то они будут умножаться обычным способом, как принято в CSS, — аналогично тому, как это происходит со свойством border-width . Три значения подразумевают, что четвертое совпадает со вторым. Два значения подразумевают, что третье совпадает с первым.

На рисунке ниже вы найдете визуальное объяснение того, как это работает. Мы можем даже указать разные горизонтальные и вертикальные радиусы для всех четырех углов, перечислив 1–4 значения до слеша и 1–4 других значения после него. Обратите внимание, что эти последовательности раскрываются в полные наборы из четырех значений по отдельности. Например, значение border-radius , равное 10px / 5px 20px , эквивалентно 10px 10px 10px 10px / 5px 20px 5px 20px .

Вооружившись этими знаниями, давайте снова вернемся к проблеме половины эллипса. Можно ли указать такие значения border-radius , чтобы в результате была сгенерирована требуемая фигура? Мы не узнаем, пока не попробуем.

Начнем с того, что запишем некоторые результаты наблюдений: фигура симметрична по горизонтали, что означает, что верхний левый и верхний правый радиусы должны быть одинаковыми; точно так же должны совпадать нижний левый и нижний правый радиусы; наверху нет прямого горизонтального края (то есть вся верхняя граница фигуры изогнута), что означает, что верхний левый и верхний правый радиусы в сумме должны давать 100% ширины фигуры; исходя из предыдущих двух наблюдений, можно заключить, что горизонтальные радиусы, как левый, так и правый, должны составлять 50%; по вертикали скругление двух верхних углов распространяется на всю высоту элемента, а у нижних углов скругление отсутствует.

Следовательно, разумными значениями для вертикальной части border-radius кажутся 100% 100% 0 0;
Так как вертикальное скругление нижних углов равно нулю, их горизонтальное скругление не играет никакой роли, поскольку результат всегда будет нулевым (вы можете вообразить угол с нулевым вертикальным скруглением и положительным горизонтальным?

Вот-вот, разработчики спецификации тоже не могли).
Сложив все это вместе, нетрудно сформулировать CSS-код для гибкой половины эллипса:
border-radius: 50% / 100% 100% 0 0;
Ничуть не сложнее сообразить, какими должны быть значения для создания половинки эллипса, разрезанного по вертикальной оси.

border-radius: 100% 0 0 100% / 50%;
В качестве упражнения попробуйте написать CSS-код для второй половинки эллипса.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/half-ellipse

Четвертинки эллипса

После создания целого эллипса и половины эллипса естественным образом возникает вопрос о четвертинке эллипса, например такой.

Следуя той же цепочке размышлений, можно заметить, что для создания четвертинки эллипса необходимо для одного из углов указать 100% радиус как по горизонтали, так и по вертикали, а остальные определить безо всякого скругления.
Поскольку процентное значение должно быть одинаковым и для горизонтальных, и для вертикальных радиусов всех четырех углов, запись со слешем не требуется. Код будет выглядеть так:
border-radius: 100% 0 0 0;
К сожалению, на случай, если вы теперь размышляете о других долях эллипса, которые можно было бы создавать с помощью border-radius (например, можно ли сконструировать одну восьмую эллипса? или одну треть?), должна вас огорчить: border-radius не поддерживает значения, которые бы позволили реализовать это.

Simurai мастерски применил возможности border-radius для создания всевозможных типов фигур для своих кнопок-конфеток

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Твитнуть

(Visited 819 times, 1 visits today)

CSS свойство border-radius — GeeksforGeeks

Свойство border-radius в CSS используется для скругления углов внешних границ элемента. Это свойство может содержать одно, два, три или четыре значения. Свойство border-radius используется для установки радиуса границы. Это свойство не применяется к элементам таблицы, когда происходит свертывание границы.

Синтаксис:

 border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Значения свойств:

длина : Представляет форму углов, значение по умолчанию равно 0.
процент(%) : Представляет форму углов в %.
начальный : используется для установки свойства CSS элемента в значение по умолчанию.
наследовать : используется для наследования свойства элемента от значения свойства его родительского элемента.

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

border-radius: свойство border-radius может содержать одно, два, три или четыре значения.

радиус границы: 35 пикселей; Используется для установки радиуса границы каждого угла. Это комбинация четырех свойств: граница-верхний-левый-радиус, граница-верхний-правый-радиус, граница-нижний-левый-радиус, граница-нижний-правый-радиус. Он устанавливает для всех углов одинаковое значение.

Пример: В этом примере показано свойство border-radius , значение которого определяется единственным значением.

HTML

< html >

< head >

< title > Закругленные углы title >

< style >

9 GF 0 0 9 0 059 0 60060

радиус границы: 35 пикселей;

фон: #009900;

отступы: 30 пикселей;

text-align: center;

ширина: 300 пикселей;

высота: 120 пикселей;

}

style >

head >

< body >

< div class = "GFG « >

< H3 > Geeksforgeeks H3 >

>

9 >

>

< p >border-radius: 35px; p >

div >

Body >

HTML >

ОБЩЕСТВЕННЫЙ:

9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 . Это свойство используется для установки первого значения в качестве верхнего левого и нижнего правого углов, а второго значения в качестве верхнего правого и нижнего левого углов.

Пример: В этом примере показано свойство border-radius , значение которого задается двойными значениями.

HTML

< html >

< head >

< title >Rounded Corners title >

< style >

. GFG {

радиус границы: 20 пикселей 40 пикселей;

фон: #009900;

отступ: 30 пикселей;

text-align: center;

ширина: 300 пикселей;

высота: 120 пикселей;

}

Стиль >

.body >

< div class = "GFG" >

< h3 >GeeksforGeeks h3 >

< P > Граница-радий: 20px 40px; P > 9PX; P > 9. 0005

div >

body >

html >

Вывод:

радиус границы: 20px 40px 60px; Это свойство используется для установки первого значения в верхний левый угол, второго значения в верхний правый и нижний левый углы и третьего значения в нижний правый угол.

Пример: В этом примере показано свойство border-radius , значение которого определяется тройными значениями.

HTML

< html >

< head >

< title > Закругленные углы title >

< Стиль >

. GFG {

.

фон: #009900;

отступы: 30 пикселей;

text-align: center;

ширина: 300 пикселей;

высота: 120 пикселей;

}

style >

head >

< body >

< раздел класс = "GFG" >

< H3 > Geeksforgeeks H3 >

88 . > 
      Div  > 
    Body  >    .0058    html   >

Вывод:

px 6 граница Это свойство используется для установки первого, второго, третьего и четвертого значения радиуса границы в верхний левый, верхний правый, нижний правый и нижний левый углы соответственно.

Пример: В этом примере показано свойство border-radius , значение которого определяется четырьмя значениями.

HTML

< html >

< head >

< title > Закругленные углы title >

< style >

9 GF 0 0 9 0 059 0 60060

радиус границы: 20 пикселей 40 пикселей 60 пикселей 80 пикселей;

фон: #009900;

отступы: 30 пикселей;

text-align: center;

ширина: 300 пикселей;

высота: 120 пикселей;

}

style >

head >

< body >

< div class = "GFG" >

< h3 >GeeksforGeeks h3 >

< p >border-radius: 20px 40px 60px 80px; p >

div >

Body >

HTML >

9
9
:
9
9 9000
9 9000 9000
9 9000
9 9000
9 9000 9000 9000 9000 99 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000. 0005
Теперь мы поймем сокращенные свойства для данного ниже свойства радиуса границы.
border-top-left-radius : Это свойство используется для указания радиуса верхнего левого угла элемента.
Пример: В этом примере показано свойство border-radius , где значение свойства применяется к верхнему левому углу элемента.
HTML

< html >
< head >
     < title >Rounded Corners title >
< Стиль >
. GFG {
ГРЕД-ТОП-LEFT-RADIC: 35PX; 35PX;
         фон: #009900;
         отступы: 30 пикселей;
         text-align: center;
         ширина: 300 пикселей;
         высота: 120 пикселей;
     }
     стиль > 9 09 90
9 head > < body >      < div class = "GFG" >          < H3 > Geeksforgeeks H3 > < P > Граница-поребь;0060 p >      div > body > html >
Вывод:
border-top-right-radius : Это свойство используется для определения радиуса правого верхнего угла границы данного элемента.
Пример: В этом примере показано свойство border-radius , где значение свойства применяется к правому верхнему углу элемента.
HTML

< html >
< head >
     < title > Закругленные углы Название >
< Стиль >
.GFG {
98 99999999999999999999999999999999999999999999999999999999999999999999999999999999999.gfg { 8 99999999999999999999999999999999999999999999999999999999999999.          фон: #009900;          отступы: 30 пикселей;          text-align: center;          ширина: 300 пикселей;          высота: 120 пикселей;      }      style > head > < body > < раздел класс = "GFG" >          < h3 >GeeksforGeeks h3 >          < p >border-top-right-radius: 35px; P > Div > > > > > > 0059> HTML >
Выход:
OFFORT-BOTT-LOGE-RADIL. нижний левый угол границы, т.е. он делает нижний левый угол границы круглым.
Пример: В этом примере показано свойство border-radius , где значение свойства применяется к левому нижнему углу элемента.
HTML

< html >
< head >
     < title > Закругленные углы title >
     < style >
9 GF 0 0 9 0 059 0 60060
         радиус нижней левой границы: 35 пикселей;
         фон: #009900;
         отступы: 30 пикселей;
         text-align: center;
         ширина: 300 пикселей;
         высота: 120 пикселей;
     }
     style >
head >

< body >
     < div class = "GFG" >
< H3 > Geeksforgeeks H3 >
9 >
98 9999999999999999 > 98 >0060 < p >border-bottom-left-radius: 35px; p >      div > body > html >
Output:
border-bottom-right-radius : Это свойство используется для определения радиуса правого нижнего угла границы данного элемента.
Пример: В этом примере показано свойство border-radius , где значение свойства применяется к правому нижнему углу элемента.
HTML

< html >
< head >
     < title >Rounded Corners title >
     < style >
.GFG {
         радиус нижнего правого края: 35 пикселей;
         фон: #009900;
         заполнение: 30 пикселей;
         text-align: center;
         ширина: 300 пикселей;
         высота: 120 пикселей;
}
Стиль >
. 0060 body >
     < div class = "GFG" >
         < h3 >GeeksforGeeks h3 >

< P > Борд-дно-правый-радий: 35px; P > 9PX; P > P >

     div >
body >
html >
Вывод:
смешанное свойство радиуса границы: Это свойство используется для установки всех углов в качестве заданного значения.
Пример: Этот пример иллюстрирует border-radius свойство, где значение свойства применяется ко всем углам элемента.
HTML

< html >
< head >
     < title > Закругленные углы title >
     < стиль >
     .GFG {

         border-top-right-radius: 35px;
         радиус нижней левой границы: 35 пикселей;
         радиус нижней правой границы: 35 пикселей;
         фон: #009900;
         заполнение: 30 пикселей;
         text-align: center;
         ширина: 300 пикселей;
         высота: 120 пикселей;
     }
     style >
head >

< body >
     < div class = "GFG" >
         < h3 >GeeksforGeeks h3 >


< p >border-top-left-radius: 35px;
             < br >border-top-right-radius: 35px;
             < br >border-bottom-left-radius: 35px;
< BR > Пограничная достопримечательность-Right-Radius: 35px; P >
99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999900. body > html >
Output:
Shorthands:
Apply Radius value to all four углы:
радиус границы: значение;
Применить значение1 к верхнему левому и нижнему правому углам и значение2 к верхнему правому и нижнему левому углам:
радиус границы: значение1 значение2;
Применить value1 к верхнему левому углу, value2 к верхнему правому и нижнему левому углам и value3 к нижнему правому углу:
border-radius: value1 value2 value3;
Применить значение1 к верхнему левому углу, значение2 к верхнему правому углу, значение3 к нижнему правому углу и значение4 к нижнему левому углу:
радиус границы: значение1 значение2 значение3 значение4;
Поддерживаемые браузеры:
Google Chrome 4. 0
Internet Explorer 9.0
Microsoft Edge 12.0
Firefox 4.0
Opera 10.5
Safari 5.0 09 01 Border 01
2 90 Webflow University
Границы определяют радиус элемента и создают контуры на одной или нескольких сторонах границы элемента. Вы можете определить границу и радиус любого выбранного элемента на панели «Стиль».
В этом уроке:
Радиус
Стиль
Ширина
Цвет
Формы
Стороны и ребра
Скосы
Анимированные переходы
Границы элемента позволяют создавать границы на одной или нескольких сторонах. Границы занимают место, расширяя размеры элемента. В случае элементов с определенным размером границы будут сталкиваться с содержимым внутри.
Чтобы добавить эффект границы без увеличения размеров элемента, добавьте внутреннюю или внешнюю тень блока с размытием 0,
Радиус
Задайте радиус всех углов или отдельных углов элемента для создания закругленных углов.
По умолчанию радиус задается в пикселях (px). Чтобы использовать проценты, введите процентное значение и символ (%) в любое поле ввода границы. Вы также можете использовать любую единицу CSS из раскрывающегося списка единиц измерения.
Узнайте больше о входных значениях и единицах измерения .
Стиль
Свойство стиля определяет тип границы, которая окружает элемент. Граница может быть сплошной, пунктирной или пунктирной. Вы даже можете скрыть настройки границ, установив для стиля значение none.
Некоторые встроенные элементы имеют границы по умолчанию, например поля ввода формы и кавычки. Вы можете удалить границы по умолчанию, установив для стиля границы значение none.
Ширина
Ширина определяет толщину границы. Это значение может иметь любую единицу CSS из списка, доступного в раскрывающемся списке единиц измерения.
Узнайте больше о входных значениях и единицах измерения .
Цвет
На панели стилей > Цвет , вы можете указать цвет и непрозрачность границы любого элемента в настройках границ. Если вы измените цвет одной стороны границы, вы получите эффект скоса или рамки изображения.
Фигуры
По умолчанию установка радиуса элемента будет применяться ко всем углам. Вы можете установить значение, перетащив ползунок или введя значение в поле ввода.
Используйте значения в пикселях, чтобы получить закругленные углы, и проценты, чтобы получить эллиптические углы с тем же соотношением сторон.
Формы капсул
Для форм капсул установите значение радиуса в пикселях, превышающее половину кратчайшего измерения элемента. Большее число, например 500, обычно работает, если вы хотите пропустить расчеты.
Эллипсы
Для эллипсов установите радиус 50%. Проценты основаны на ширине и высоте элемента
Примечание. Если у вас есть элементы с разными размерами, эллипсы могут выглядеть несогласованными.
Круги
Для кругов установите радиус 50% и убедитесь, что ширина и высота элемента совпадают.
Уникальные формы
Вы можете установить разные значения для каждого угла, чтобы создать уникальные формы.
Прямоугольник в круг
Чтобы сделать прямоугольное изображение круглым, не искажая его, вы можете использовать радиус и подгонку объекта, чтобы поместить изображение в блок Div — вот как:
Перетащите блок Div на холст
Перетащите изображение внутрь Div Block
Выберите Div Block
Нажмите на панель стиля > Селектор и создайте класс (например, держатель изображения)
Установите равную высоту и ширина 4419. (например, 400 пикселей)
Установите радиус на 50% (чтобы сделать его круглым, так как ширина и высота равны)
Установите переполнение на скрытый (чтобы скрыть любую часть изображения, которая находится за пределами круга)
Выберите изображение на холсте
Установите для изображения ширину и высоту на 100% подходит для размещения круглой крышки (чтобы прикрепить ее к углу или к центру)
Стороны и края
На панели Стиль > Границы можно оформить сразу все стороны (нажав посередине) или отдельные стороны.
Если вы создаете и оформляете рамку сверху, это влияет только на верхнюю часть. Если вы создаете и оформляете границу слева, это влияет только на левую сторону.
Скосы
Скосы добавляют глубину изображению.
‍
Чтобы добавить к кнопке эффект скоса, откройте панель «Стиль» > Границы :
Добавьте границу со всех сторон кнопки (например, установите для всех сторон ширину 10 пикселей)
Добавить цвет границы (отличный от цвета кнопки) со всех сторон
Щелкните одну сторону границы на панели «Стиль»
Щелкните цвет и добавьте цвет (отличный от исходного цвета границы)
Измените ширину одной стороны
Анимированные переходы
У вас есть возможность стилизовать что угодно на панели «Стиль» — стилизуем кнопку для анимации при наведении.
‍
Чтобы при наведении кнопки скруглить углы:
Выберите кнопку на холсте
Нажмите на панель стилей > Selector и выберите Hover из раскрывающегося списка
Прокрутите вниз до Borders и добавьте радиус (например, 10px) наведите курсор мыши и создайте плавный переход:
Выберите кнопку на холсте
Нажмите на панель стилей > Selector и выберите None из раскрывающегося списка
Прокрутите вниз до Effects > Переходы > Тип > Свойство > Радиус границы
Селектор изменений в Nonead A Переход на границе-Radius
, чтобы удалить эту анимацию:
. Select the The Borderius
, чтобы удалить эту анимацию:
. Select the Borderius
. кнопка на холсте
Нажмите на панель Style > Selector и выберите Hover из раскрывающегося списка
Прокрутите вниз до Borders > RADIUS > Сброс
, чтобы дать вашей кнопке закругленные углы на щелчке:
Выберите кнопку на Canvas
Нажмите на панель стиля > Selctor и выберите . в раскрывающемся списке
Прокрутите вниз до Границы и добавьте радиус (например, 10 пикселей)
Вы можете использовать те же шаги, что и выше, чтобы добавить переход и анимировать такие элементы, как цвет границы или ширина границы при наведении или щелчке. Получайте удовольствие!
И обязательно ознакомьтесь с нашим полным курсом по анимации с помощью After Effects и Lottie.
Попробуйте Webflow — это бесплатно
Был ли этот урок полезен? Дайте нам знать!
Спасибо за отзыв! Это поможет нам улучшить наш контент.
Свяжитесь с нашим сообществом
Свяжитесь со службой поддержки
Что-то пошло не так при отправке формы.
Связаться со службой поддержки
У вас есть предложение по уроку? Дайте нам знать
Спасибо! Ваша заявка принята!
Ой! Что-то пошло не так при отправке формы.
радиус границы | Коддропс
Свойство border-radius используется для скругления углов элемента.
Это сокращенное свойство обычных свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .
border-radius может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/», от одного до четырех значений с каждой стороны косой черты.
Если косой черты нет, то: может принимать одно, два, три или четыре значения.
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // '?' указывает, что значение является необязательным
Если даны четыре значения, то они одинаково определяют радиусы каждого из четырех углов; то есть первое значение будет определять радиусы x и y верхнего левого угла, поэтому это будет круговая кривая. Второе значение задает радиусы для правого верхнего угла, третье значение задает радиусы для правого нижнего угла, а четвертое значение задает радиусы левого нижнего угла.
Если даны три значения, первое указывает радиусы верхнего левого угла, второе указывает радиусы верхнего правого и нижнего левого углов, а третье указывает радиусы нижнего правого угла.
Если задано два значения, то первое указывает радиусы верхнего левого и нижнего правого углов, а второе значение указывает радиусы верхнего правого и нижнего левого углов.
Если задано одно значение, то оно указывает одинаковые радиусы четырех углов.
Например, следующее:
радиус границы: 1em 3em 2em;
эквивалентно:
радиус верхнего левого края: 1em; радиус верхней правой границы: 3em; граница-нижний-правый-радиус: 2em; радиус нижнего левого края: 3em;
В каждом из приведенных выше случаев, когда косая черта не используется, четыре угла элемента будут закруглены, а их кривизна будет идеальной окружностью.
Два равных радиуса на каждом углу приведут к круглой кривизне. Каждый угол в этом примере имеет горизонтальный и вертикальный радиусы 50 пикселей.
Если есть косая черта, то: она может принимать до восьми значений — от одного до четырех значений с каждой стороны косой черты.
border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
Значения, указанные перед косой чертой, задают горизонтальный радиус углов в том же порядке, что и ранее. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.
Например, следующее:
радиус границы: 2em 1em 4em / 0. 5em 3em;
эквивалентно:
граница-верхний-левый-радиус: 2em 0,5em; радиус верхней правой границы: 1em 3em; граница-нижний-правый-радиус: 4em 0.5em; граница-нижний-левый-радиус: 1em 3em;
В этом случае углы элемента будут скруглены, а их кривизна будет эллиптической.
Два неравных радиуса на каждом углу приведут к эллиптической кривизне. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.
Общая информация и заметки
Если элемент имеет фоновый цвет или фоновое изображение, фон также будет обрезан до указанного радиуса границы.
Фоновое изображение элемента обрезается до указанного радиуса границы.
Однако иногда цвет фона элемента может «вытекать» за пределы кривизны границы при ее скруглении. Чтобы исправить это, вы можете использовать background-clip и установите для него значение padding-box .
.элемент { радиус границы: 30px; фоновый клип: padding-box; }
Если элемент имеет изображение границы, изображение границы , а не обрезается по кривой закругленных углов.
Содержимое элемента может выйти за пределы элемента на закругленных углах, если у элемента недостаточно отступов, чтобы «протолкнуть» содержимое внутрь. (См. изображение ниже)
Содержимое элемента может выйти за его пределы, если углы закруглены, если у него нет отступов.
В этом примере добавлены соответствующие отступы, чтобы содержимое не выходило за пределы углов. Обратите внимание, что границы нет, но фон по-прежнему будет иметь закругленные углы.
.элемент { фон: черный; белый цвет; радиус границы: 1em; набивка: 1em; }
Кроме того, область за пределами кривой края границы не принимает события указателя от имени элемента.
Кроме того, кривые углов не должны перекрываться: когда сумма любых двух соседних радиусов границ превышает размер рамки, браузеры должны пропорционально уменьшать используемые значения всех радиусов границ до тех пор, пока ни один из них не перекроется. Вы можете узнать больше о том, как это работает, в отличном докладе Леа Веру о свойстве border-radius .
Процентные значения идеально подходят для создания полных круглых или эллиптических форм. Используя радиус границы : 50%; приведет к полной круглой форме элемента, высота и ширина которого равны.
Элемент с одинаковой высотой и шириной и значением радиуса границы 50%;
Если высота и ширина элемента не равны, результирующая форма будет эллипсом.
Элемент с радиусом границы 50%, высота и ширина которого не равны.
Значения
Неофициальный синтаксис выглядит так:
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;
или это:
border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
В обоих случаях знак вопроса (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его значение, как указано в разделе описания выше.
Каждый радиус может иметь значение <длина> или <процент> .
Проценты для горизонтального радиуса относятся к ширине рамки, тогда как проценты для вертикального радиуса относятся к высоте рамки. Отрицательные значения не допускаются.
<процент>
См. запись для списка возможных значений.
<длина>
См. запись для списка возможных значений.
Примеры
радиус границы: 50%; радиус границы: 30px 20px 40px; радиус границы: 1em 2em; радиус границы: 3em / 2em 4em; радиус границы: 1em 2em 1em 3em / 2em 3em;
Поддержка браузера
Рабочий стол
5
50
9
10
5
Мобил / Таблетка
4,0
2,2
NO
105
104
9 9000 * DENOTES.
Поддерживается:
Да
Нет
Частично
Polyfill
Статистика с сайта caniuse.com Модуль «Фон и границы», уровень 3
Радиус скромной границы – Беседа Леа Веру
Автор Сара Суэйдан. Последнее обновление: Мэри Лу, 11 декабря 2016 г., 22:19.
У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.
CSS Border-Radius может это сделать?
Как создать очень крутые эффекты с помощью редко используемой функции.
TL/DR: Когда вы используете восемь значений, определяющих радиус границы в CSS, вы можете создавать органично выглядящие формы. ВОТ ЭТО ДА. Нет времени все читать? — мы сделали для вас визуальный инструмент. Найдите его здесь.
В этом году на Frontend Conference в Цюрихе Рэйчел Эндрю рассказала о «Раскрытие возможностей CSS Grid Layout ». В конце своего выступления она упомянула что-то о старом свойстве CSS, которое застряло у меня в голове:
. Изображение закругляется только с помощью хорошо поддерживаемого радиуса границы. Не забывайте, что старый CSS все еще существует и полезен. Вам не нужно использовать что-то необычное для каждого эффекта.
— Рэйчел Эндрю
Вскоре после того, как я услышал это выступление, я подумал, что вы определенно можете создавать больше, чем просто круги, и начал копать глубже в то, что можно сделать с помощью border-radius.

Мастеринг Border-Radius
Одиночное значение
Начнем с основ. Надеюсь, это не утомит вас. Вы, вероятно, знакомы с CSS, а также с радиусом границы. Он существует уже несколько лет, в основном используется с одним значением, подобным этому: border-radius: 1em и, возможно, была одной из самых обсуждаемых/любимых функций CSS3 в 2010 году, когда css3please.com был вашим лучшим другом.
Всякий раз, когда вы используете только одно значение, все углы округляются на это значение:
Как вы можете видеть в приведенном выше примере, рядом со значениями фиксированной длины, такими как px , rem или em , вы также можете использовать проценты. Они в основном используются для создания круга, установив радиус границы на 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его на прямоугольнике, у вас больше не будет симметричных углов. Вот пример, показывающий разницу между border-radius: 110px и border-radius: 30% применяется к прямоугольнику.

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

Восемь значений, разделенных косой чертой (это самое интересное)
Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы подошли к захватывающей части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Посмотрим, что об этом говорит спецификация:
Если значения указаны до и после косой черты, то значения до косой черты задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус. Если косой черты нет, то значения задают оба радиуса одинаково.
— W3C
Таким образом, значения до косой черты отвечают за горизонтальные расстояния, тогда как значения после косой черты определяют вертикальные длины. Но что это значит? Помните процентные значения прямоугольных фигур? У нас были разные абсолютные значения для вертикального и горизонтального расстояний и асимметрично закругленных углов, и это именно то, что вы получаете, когда используете синтаксис косой черты .
Итак, когда вы сравниваете border-radius: 4em 8em 9От 0060 до border-radius: 4em / 8em результаты совсем другие.
Симметричные углы слева образуют четверть круга, тогда как асимметричные углы справа являются частью эллипса. Формы, которые вы получаете с этим, выглядят немного странно, если честно. Но помните круги, которые вы создаете с радиусом границы : 50% . Вы получаете круг, потому что оба значения, определяющие одну сторону, в сумме составляют 100% (50% + 50% = 100%), и прямой линии не осталось, что напоминает исходный квадрат. Если вы примените ту же логику к полному синтаксису границы-радиуса с восемью значениями, вы можете создать форму, которая немного похожа на плектр или органическую клетку: В итоге четыре перекрывающихся эллипса создают окончательную форму. Легко ха! Не паникуйте… Мы сделали для вас визуальный генератор Мне потребовалось некоторое время, чтобы привыкнуть к этому синтаксису. Как-то не очень интуитивно. Чтобы упростить вам задачу, мы создали небольшой инструмент, который поможет вам создать собственную органическую форму. Не пересекать потоки Теперь, когда вы знаете всего 8 значений, вам может быть немного грустно, потому что наш инструмент border-radius-tool не дает вам возможности установить каждое значение отдельно… Сидите спокойно, вот 8-ТОЧЕЧНЫЙ ПОЛНЫЙ КОНТРОЛЬ Версия . Если вы достаточно взрослые, вы, возможно, помните эту цитату из фильма «Охотники за привидениями» 1984 года: «Не переходи ручьи». - "Почему?" — «Было бы плохо». Здесь происходит что-то похожее: если скрестить ручки с одной стороны, фигура ведет себя… скажем так, непредсказуемо. Но посмотрите сами, в конце концов, это не закончится полной протонной инверсией или чем-то еще, но не говорите, что я вас не предупреждал. PS. Большое спасибо simurai. Еще в 2010 году он создал несколько кнопок BonBon на CSS3. Несмотря на то, что они выглядят немного устаревшими, это единственное место, где я когда-либо сталкивался и узнал о синтаксисе косой черты. Посмотрите эту классную функцию в действии Фотографии с сайта gratisography.com См. Радиус границы пера от Nils (@enbee81) на CodePen. Эта статья изначально была опубликована на Medium, перепечатана с разрешения автора. Union и Corner Radius - Руководство по фигмам Добавить в фавориты Работа над Союзом и угловым радиусом Рис. Руководство 1 Инструмент рисунка фигма 0:54 2 Эдтер. Фигма. 1:17 3 Основные инструменты 2:14 4 Положение, размер, вращение и свойства радиуса угловой0005 1:13 7 Темный режим с цветами выбора 1:17 8 Градиенты 1:36 9 Создание фона 2:37 Bling. 2:02 11 Выравнивание, распределение, и приливные свойства 1:24 12 Союз и угловой радиус 2:53 13 .0005 1:48 14 Использование изображений 2:00 15 Заполнение, ход и усовершенствованный ход 3:21 16 Текстовые свойства и стили 1:37 . 17 Google Fonts and Custom Fonts 1:13 18 Доступность 19 Отзывчивый дизайн 3:07 20 ограничения 1:11 21 0002 Mayout Grid 2:00 22 АВТОМОБИЛЬНАЯ ПЕРЕКЛЮЧАТЕЛЬНОСТЬ на рис. Perspective Mockups 2:00 26 3D Mockups 1:20 27 Using Illustrations in Design 2:03 28 Booleans 2:24 29 Design Icon 1:48 30 Компоненты 1:50 31 Командная библиотека 2:14 32 Создание Confetti 1:59 33 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 Дублирование 1:41 34 Apple Watch Ring Dring 2:23 35 Экспортные активы в рисмере 1:39 36 Экспорт CSS Code 1:04 . 0002 37 Проектирование с данными 1:57 38 Прототипирование 2:25 39 История версии 1:25 40 Multiplayer, Комментарии, и Previews 400005 . 36 41 Варианты 5:39 42 Интерактивные компоненты 43 4:47 44 5:47 44 5 5:47 4000 4000 9000 4000 5:47 4000 4000 44 5 5:47 4000 4000 5:47 4000 4000 9000 Blob Background 4:45 46 Wave Background 6:46 47 3D Shapes 12:27 48 Parallax Prototyping in Figma 7:52 49 3D Perspection Design 7:16 50 Стеклянный значок 9:16 51 Хрустальный шар с анимацией эффекта воды 12:54 52 Дизайн и код анимация анимация анимация анимация анимация анимация. с буквами 29:38 53 Футуристическая линейная анимация 19:30 Логические операции позволяют пользователям комбинировать формы. Их четыре, но в этом уроке мы сосредоточимся на выборе объединения. Затем мы добавим угловой радиус, чтобы сделать дизайн более впечатляющим. Покупка включает доступ к более чем 30 курсам, более 240 обучающим материалам премиум-класса, более 120 часам видео, исходным файлам и сертификатам. Учитесь с видео и исходными файлами. Доступно только подписчикам Pro. Покупка включает доступ к более чем 30 курсам, более чем 240 обучающим материалам премиум-класса, более 120 часам видео, исходным файлам и сертификатам. Шаблоны и исходный код Загрузить исходные файлы Загрузить видео и ресурсы, чтобы обращаться к ним и учиться в автономном режиме без перерыва. Шаблон дизайна Исходный код для всех разделов Видеофайлы, ePub и субтитры Просмотреть все загрузки 1 Инструмент дизайна Figma Начало работы с Figma в качестве инструмента дизайна 0:54 2 Редактор в Figma Знакомство с интерфейсом Figma 1:17 3 Знакомство с основными инструментами2 панель в Figma 2:14 4 Свойства положения, размера, поворота и углового радиуса Работа со свойствами положения, размера, поворота и углового радиуса 1:27 5 Стили цвета Работа со стилями цвета на рис. 1:13 6 Маски Изучение маски на рисмере 1:47 7 Dark с цветами отбора Lead для разработки и адаптации дизайна для темного режима с помощью Selection Colors 1:17 8 Градиенты Работа с градиентами в Figma 1:36 9 Создание фона Фон проектов на рис. 2:37 10 Режимы смешивания Изучение интересных методов с режимами смешивания 2:02 11 Выравнивание, распределение, и починки. Уборка в Figma 1:24 12 Объединение и радиус угла Работа над объединением и радиусом угла 2:53 13 Эффекты тени и размытия 9Использование изображений Обводка Узнайте больше о заливке и различных параметрах обводки в Figma 3:21 16 Свойства и стили текста Изучите и узнайте о свойствах типов Figma 1:37 17 Google Fonts и пользовательские шрифты Игра с шрифтами на дизайне 1:13 18 Доступность Изучение A11Y в дизайне 1 Отвечая дизайн . и Auto Layout 3:07 20 Constraints Работа с ограничениями в Figma 1:11 21 Layout Grid Научитесь проектировать с использованием сеток, столбцов, строк и полей. 2:00 22 Автоматическая макет на рис. . 55 24 Векторная сеть Научитесь использовать векторные сети и дизайнерские иконки 1:19 25 Мокапы в перспективе Используйте реалистичные макеты для представления ваших дизайнов 2:00 26 3D Mockups Добавление 3D -макетов к дизайну 1:20 27 Использование иллюстрации в дизайне Инкорпируйте иллюстрации . 2:03 28 Логические значения Использование логических значений для создания значков 2:24 29 Дизайн значков Узнайте, как создавать значки с помощью инструментов Figma 1:48 30 Компоненты Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов. 1:50 31 Команда библиотека Публикация ваших стилей и компонентов дизайна 2:14 32 Создание конфетти Loofer Looper 1:59 Loofer Loofer Дублирование Работа с плагином Looper Figma 1:41 34 Apple Watch Ring Создание кольца Apple Watch на рис. 2:23 35 Экспортные активы на рис. Узнайте об экспортирующих активах на фигме для реализации 1:39 36 Экспрессия CSS код 5 36 Экспрессия CSS 5 1:39 36 . Работа с CSS-кодом на Figma 1:04 37 Проектирование с использованием данных Плагины, помогающие создавать дизайн с реальным содержанием 1:57 38 0005 быстро создайте весь поток для дизайна вашего приложения на рис. 2:25 39 История версий Работа с историей версий на рис. 1:25 40 Множественная, комментирование и превью 400009 . Узнайте о сотрудничестве и совместном использовании с Figma 1:36 41 Варианты Объединение похожих компонентов в варианты 5:39 42 9 Интерактивные компоненты0005 Создание многоразовых взаимодействий с использованием интерактивных компонентов 43 UIKITS Дизайн с использованием UIKITS на рис. 4:47 44 Плагины . Фон капли Узнайте, как создать простой фон капли в Figma 4:45 46 Фон волны Узнайте, как создать простую волну в Figma с помощью инструмента Bend и плагина волны 6:46 47 3D Формы Узнайте, как создать 3D -формы 12:27 48 Parallax Prototyping на фигме Узнайте, как создать метод анимации параллакса, где на фоне и на фоне и на фоне и на фоне и на фоне и на фоне. Слои переднего плана перемещаются с разной скоростью 7:52 49 Перспективный дизайн 3D-интерфейса Узнайте, как превратить пользовательский интерфейс в трехмерную перспективу 7:16 50 Стекло 005 Узнайте, как создать стеклянную иконку 9:16 51 Хрустальный шар с анимацией с эффектом воды Узнайте, как анимировать волны в хрустальном шаре с помощью инструмента прототипирования 12:54 50025 90 Создайте и закодируйте линейную анимацию с буквами Узнайте, как анимировать линии с помощью CSS в CodeSandbox 29:38 53 Футуристическая линейная анимация Узнайте, как создать футуристический фон с линиями с помощью инструмента «Перо» в Figma 19:30 Познакомьтесь с инструктором Мы все стараемся придерживаться нашего метода пошагового обучения, предоставляя исходные файлы и отдавая приоритет дизайну наших курсов. Дхайрия Двиведи Frontend Developer Я люблю читать и писать. 2 курса - 5 часов Справочник по дизайну пользовательского интерфейса Полное руководство с лучшими советами и рекомендациями по дизайну пользовательского интерфейса. Бесплатные учебные пособия для изучения дизайна пользовательского интерфейса. 2 часа Справочник Figma Полное руководство с лучшими советами и рекомендациями по Figma 3 часа Лучшее руководство по закругленным углам с помощью CSS Закругленные углы CSS возможны благодаря свойству CSS border-radius 9004. При разработке сайта вы можете решить создать кнопку с закругленными углами CSS. Другой пример — использование закругленных углов при добавлении на сайт фотографии владельца бизнеса на паспорт, чтобы изображение выглядело эстетично. Читайте дальше, чтобы узнать, как вы можете создавать закругленные углы в CSS с примерами. Содержание Как закруглить углы в CSS Настройка отдельных закругленных углов Использование сокращенного радиуса границы CSS для создания закругленных углов Установка четырех значений Создание эллиптических углов Поддержка браузера Зачем использовать закругленные углы Заключение Как скруглить углы в CSS Чтобы скруглить углы в CSS , вы должны использовать свойство border-radius. Границы окружают внешние края элемента, поэтому свойство границы в CSS указывает, как должна выглядеть граница для элемента. CSS позволяет скруглять углы в CSS, используя либо сокращенное значение border-radius, либо полное свойства индивидуального радиуса для каждого угла. Вы можете создать закругленную кнопку CSS, используя оба подхода. Настройка отдельных скругленных углов Вы можете использовать четыре подсвойства свойства border-radius для индивидуальной установки радиуса границы каждого угла . Подсвойства: border-top-right-radius граница-верхний-левый-радиус граница-нижний-правый-радиус граница-нижний-левый-радиус Используя эти свойства, вы можете индивидуально задавать закругленные углы для элемента HTML. Подсвойства принимают значения длины, такие как пиксели и проценты. Чтобы изучить, как эти свойства создают скругленные углы в CSS, вот сценарий. Предположим, у вас есть задача создать область отображения, правый нижний и левый верхний углы которой закруглены. Вы можете использовать двухпиксельную сплошную оранжевую рамку. Затем вы можете скруглить верхний левый угол на 25 пикселей и нижний правый угол на 12 пикселей. Однако сначала вам нужно создать область отображения в HTML и создать закругленные углы в CSS следующим образом: .display { ширина: 250 пикселей; высота: 100 пикселей; граница: 2 пикселя сплошного оранжевого цвета; граница-верхний-левый-радиус: 25px; граница-нижний-правый-радиус: 12px; } Использование сокращения CSS Border Radius для создания закругленных углов Вместо того, чтобы создавать каждый закругленный угол отдельно, вы можете использовать сокращение border-radius для установки четырех подсвойств . Таким образом, вы можете создать закругленные углы в одной строке кода. Сокращение радиуса границы помогает устранить необходимость определять каждый угол с помощью другого свойства. Его синтаксис варьируется в зависимости от количества значений , которые вы хотите указать . Независимо от синтаксиса, это свойство позволяет определить стиль CSS для закругления краев. В этом разделе вы изучите различные способы использования свойства border-radius для создания закругленных углов. Синтаксис Пример Пояснение Установка одного значения радиус границы: 25 пикселей; Значение одинаково изменяет все углы элемента. Установка двух значений радиус границы: 25px 12px; Первое значение изменяет как верхний левый угол, так и нижний правый угол. Второе значение изменяет верхний правый угол и нижний левый угол Установка трех значений радиус границы: 50px 30px 25px; Первое значение изменяет верхний левый угол Второе значение изменяет верхний правый угол и нижний левый угол Третье значение изменяет правый нижний угол Установка четырех значений радиус границы: 50px 30px 25px 12px; Первое значение изменяет верхний левый угол. Второе значение изменяет верхний правый угол. Третье значение изменяет правый нижний угол. Четвертое значение изменяет нижний левый угол. – Установка одного значения Указав одно значение, вы применяете одно и то же значение радиуса границы ко всем углам элемента. Предположим, в предыдущем примере вы решили создать границу радиусом 25 пикселей по всем углам. Вот как вы можете сделать это в CSS. .дисплей { ширина: 250 пикселей; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; радиус границы: 25 пикселей; } В этом примере область отображения составляет 250 пикселей в высоту и 250 пикселей в ширину. Кроме того, дисплей имеет двухпиксельную сплошную оранжевую рамку. Более того, для свойства border-radius установлено значение 25 пикселей, что создает закругленные углы для каждого угла области отображения. – Установка двух значений Свойство border-radius позволяет вам также определяют два значения . Когда вы создаете элемент, вы можете сделать так, чтобы нижний правый и верхний левый углы имели одни и те же закругленные углы. В то же время вы можете установить разные значения округления для нижнего левого и верхнего правого углов. В CSS, когда вы устанавливаете два значения для свойства border-radius, значения применяются в определенном порядке. Первое значение определяет радиус границы для верхнего левого угла и нижнего правого угла. Второе значение устанавливает значение радиуса границы, которое вы хотите применить к верхнему правому и нижнему левому углам. Допустим, вы хотите скруглить верхний левый угол и нижний правый угол области отображения, которую вы создали ранее, на 25 пикселей. Кроме того, вы можете округлить верхний правый и нижний левый углы на 12 пикселей. Вот как вы можете сделать это в CSS : .display { width: 250px; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; радиус границы: 25px 12px; } – Установка трех значений С помощью свойства border-radius, , вы можете определить три значения для создания уникальных закругленных углов. Присвоение этому свойству трех значений позволяет создавать уникальные эффекты закругления для верхнего левого, верхнего правого, нижнего левого и нижнего правого углов. Значения применяются в том порядке, в котором вы их установили. Таким образом: Первое значение относится к верхнему левому углу элемента Второе значение применяется как к верхнему правому, так и к нижнему левому углам элемента Третье значение относится к правому нижнему углу элемента Предположим, вы хотите, чтобы созданная вами область отображения имела различные значения скругления углов, как показано ниже: Скругление верхнего левого угла на 50 пикселей Скругление правого верхнего и левого нижнего углов на 30 пикселей Скругление правого нижнего угла на 25 пикселей Вот как это можно сделать: .display { width: 250px; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; радиус границы: 50px 30px 25px; } – Установка четырех значений Наконец, вы также можете использовать свойство border-radius для создания округлителей с четырьмя различными значениями. Он позволяет вам определять скругленные углы для элемента, присваивая четыре значения свойству border-radius. Браузер будет интерпретировать значения, которые вы присваиваете каждому углу, в следующем порядке: Первое значение будет применяться к верхнему левому углу элемента Второе значение будет применяться к правому верхнему углу элемента Третье значение будет применяться к правому нижнему углу элемента Четвертое значение будет применяться к левому нижнему углу элемента Теперь предположим, что вы хотите, чтобы область отображения имела различных скругленных угла . Например, вы можете установить значение для верхнего левого угла на 50 пикселей, верхнего правого угла на 30 пикселей, нижнего правого угла на 25 пикселей и нижнего левого угла на 12 пикселей. Вот как это можно сделать с помощью CSS: . display { width: 250px; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; радиус границы: 50px 30px 25px 12px; } Создание эллиптических углов Помимо создания закругленных углов, вы можете использовать свойство border-radius для проектирования эллиптических границ . Для этого необходимо разделить два набора значений углов элемента косой чертой (/) . Синтаксис для определения эллиптических углов: радиус границы: радиус по горизонтали / радиус по вертикали; Допустим, вы хотите определить 50% эллиптический угол для горизонтальных углов и 25% для вертикальных углов области отображения, которую вы создали ранее. Вы можете сделать это, используя следующий код CSS. .display { ширина: 250 пикселей; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; границ-радиус: 50% / 25%; } У вас получится фигура с эллиптическими закругленными углами. Более того, вы можете создать круглую кнопку CSS , используя синтаксис для создания эллиптических углов. Имейте в виду, что это возможно только , когда объект является квадратом . В этом случае, используя область отображения в качестве примера, вы можете установить равные горизонтальные и вертикальные углы, установив значения на 50% следующим образом: .display { ширина: 250 пикселей; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; радиус границы : 50% / 50%; } Поддержка браузеров Поддержка закругленных углов в разных браузерах различается . Браузеры, которые поддерживают закругленные углы и эллиптические границы для рабочего стола, включают: Chrome 4 и выше для закругленных углов Край 12 Firefox 4 и выше Internet Explorer 9 Опера 10. 5 Safari 5 и выше Браузеры , поддерживающие эту функцию на смартфонах, включают: Chrome Android 18 Firefox для Android 4 Опера Android 11 Сафари на iOS 4.2 Зачем использовать закругленные углы Идея закругленных углов заключается в том, что их обработка требует меньше когнитивных усилий. Когда вы скругляете углы, вы делаете их более простыми в обработке и более привлекательными . Теория, лежащая в основе того, что люди связывают острые края с опасностью, но более мягкие края вызывают чувство безопасности и дружелюбия. Это известно как предвзятость контура, поскольку люди предпочитают предметы с контурами по сравнению с острыми предметами. Например, знак остановки имеет острые края, которые не являются естественными. На фоне органических и более мягких естественных форм выделяется знак «стоп». Вот почему вы создаете сообщения об ошибках или сообщения, которые должны видеть пользователи, в коробках с острыми краями.

iOS Safari	Android	Opera Mobile	Android Chrome	Android Firefox
3.2 *	2.1 *	11	56	51

Синтаксис	Пример	Пояснение
Установка одного значения	радиус границы: 25 пикселей;	Значение одинаково изменяет все углы элемента.
Установка двух значений	радиус границы: 25px 12px;	Первое значение изменяет как верхний левый угол, так и нижний правый угол. Второе значение изменяет верхний правый угол и нижний левый угол
Установка трех значений	радиус границы: 50px 30px 25px;	Первое значение изменяет верхний левый угол Второе значение изменяет верхний правый угол и нижний левый угол Третье значение изменяет правый нижний угол
Установка четырех значений	радиус границы: 50px 30px 25px 12px;	Первое значение изменяет верхний левый угол. Второе значение изменяет верхний правый угол. Третье значение изменяет правый нижний угол. Четвертое значение изменяет нижний левый угол.

Border radius с одной стороны: border-radius | htmlbook.ru

border-radius — CSS | MDN

Значения

Формальный синтаксис

Как сделать border radius только с одной стороны

border-radius CSS

Общая информация и примечания

Официальный синтаксис

Значения

Поддержка браузерами

Рекомендация W3C

CSS: интересные возможности border-radius

Старые свойства и современный веб-дизайн

Освоение border-radius

▍Единственное значение

▍Четыре отдельных значения

▍Восемь значений, разделённых косой чертой

Итоги

border — radius

Пример

Как это понять

Как пишется

Подсказки

На практике

Realetive

Алёна Батицкая

3 CSS метода для добавления границ элементов

Обновление модели CSS Box

Синтаксис и использование&nbsp;border

Когда использовать&nbsp;border

Синтаксис и использование&nbsp;outline

Когда использовать&nbsp;outline

Синтаксис и использование&nbsp;box-shadow

Когда использовать&nbsp;box-shadow

Собираем все вместе

Границы кнопок

Обновление метода отладки CSS

Обеспечение видимого фокуса

Подводные камни&nbsp;outlineи&nbsp;box-shadow

Дополнительный совет: Градиентные границы

Рамки со скругленными углами.

ГЛАВА 11. Отступы, рамки и выделение

Параметры рамки

Многоцветные рамки

Рамки со скругленными углами

Выделение со скругленными углами

7.

ГЛАВА 11. Отступы, рамки и выделение

Параметры рамки

Многоцветные рамки

Выделение со скругленными углами

7. Временные рамки

Buttons & Frames (Кнопки и рамки)

Frames (Рамки)

Настройка рамки фокуса

Дорогу киборгам! Кибатлон и рамки разумного Евгений Золотов

Изучаем CSS: свойство border (с примерами)

Хочешь знать больше про веб?

1. Анимированный border

2. Границы элемента, обозначенные изображениями

3. Граница в «змеином» стиле

4. Ступенчатая граница

5. CSS-border, состоящий из одной лишь тени

6. Граница с тенью и контуром

7. Несколько теней и контур

8. Двойной border с box-shadow

9. Разноцветная граница

Как сделать гибкие эллипсы — Как создать сайт

Как сделать гибкие эллипсы

Проблема

Полуэллипсы

CSS свойство border-radius — GeeksforGeeks

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Синтаксис и использование border

Когда использовать border

Синтаксис и использование outline

Когда использовать outline

Синтаксис и использование box-shadow

Когда использовать box-shadow

Подводные камни outlineи box-shadow

`Добавить комментарий Отменить ответ`