webkit border radius что это

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

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

Освоение border-radius

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

Источник

border-radius CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значения

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

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

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

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

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

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

Поддерживается со следующих версий:

* требуется указание префикса

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!

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

Источник

Блог Vaden Pro

Особенности работы свойства border-radius

В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.

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

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

Проблемы с webkit-браузерами

Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome:

Глядя на картинку в первую очередь можно отметить, что Firefox более плавно обрабатывает скругление, Chrome отрисовывает слегка угловатый полукруг. Также мы видим, что у хрома установленная рамка в некоторых местах просвечивается и видно заливку заднего фона.

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

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

Проблемы скруглений изображения

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

Ожидали увидеть скругленную картинку с красной рамкой, а видим

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

Выход из ситуации

Первое, что приходит в голову для того, чтобы решить эту проблему – это применить скругление углов не только для родителя, но и непосредственно к самой картинке. Причем, многие верстальщики поддерживают такую идею, я не раз натыкался на такое предложение в соответствующих форумах. Итак, записываем код:

Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка.

Еще одно решение

Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет.

Итак, вот код этого решения:

Теперь убедимся, что наш способ работает, пропускаем код через браузер

В каких браузерах работает?

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

Источник

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

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

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

Но можно использовать свойство border-radius для одновременного установления всех четырех углов. Свойство может иметь от одного до четырех значений.

Если установлены четыре значения, будут отображены границы top-left, top-right, bottom-right и bottom-left соответственно. Если bottom-left отсутствует, будет использовано то же значение, что и для top-right. Если отсутствует bottom-right, будет использовано то же значение, что и для top-left, а если установлено только одно значение, оно будет использовано в равной степени для всех четырех углов.

Разрешается использовать одно, две, три или четыре значения длины или процента. Используется, чтобы установить один радиус для углов. Также допустимо использовать значения через косую черту (/). Используется, чтобы установить дополнительный радиус для создания эллиптических углов.

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

Синтаксис¶

Пример¶

Пример¶

Пример¶

Источник

Свойство border-radius

Много лет я испытывал огромные страдания, создавая скругленные углы для полей на своих веб-страницах. Я не самый хороший графический дизайнер, поэтому процесс всегда был крайне утомительным и мучительным. И я знал, что не одинок. Просмотрите любую видеопрезентацию, посвященную новым возможностям HTML5, и вы увидите, что аудитория начинает неистовствовать при каждом упоминании свойства CSS, позволяющего с легкостью создавать скругленные углы. Казалось бы, что может быть проще — это всего лишь банальные скругленные углы! Однако в течение многих лет они представляли собой невероятную сложность для разработчиков.

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

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-webkit-border-radius: 20px; border-radius: 20px;

Font: bold 36px verdana, sans-serif;

Свойство border-radius пока что находится на этапе разработки, поэтому мы добавили префиксы — moz — и — webkit — (так же, как делали это для свойств, которые изучали в главе 2). Если все углы должны быть одинаковыми, то свойству можно передать только одно значение. Однако аналогично свойствам margin и padding, данное свойство позволяет указывать индивидуальные значения для каждого угла.

Листинг 3.4. Разные значения для всех углов поля

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px 10px 30px 50px;

-webkit-border-radius: 20px 10px 30px 50px; border-radius: 20px 10px 30px 50px;

Font: bold 36px verdana, sans-serif;

Как вы видите в листинге 3.4, четыре значения, связанные со свойством border-radius, представляют четыре местоположения в следующем порядке: верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол. Значения всегда перечисляются, начиная с верхнего левого угла по часовой стрелке.

Так же, как свойства margin и padding, свойство border-radius способно принимать набор всего из двух значений. В таком случае первое значение связывается с первым и третьим углами (верхний левый, нижний правый), а второе — со вторым и четвертым углами (верхний правый, нижний левый). Повторю еще раз — углы всегда отсчитываются по часовой стрелке, начиная с левого верхнего.

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

Листинг 3.5. Эллиптические углы

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px / 10px;

-webkit-border-radius: 20px / 10px;

Border-radius: 20px / 10px;

Font: bold 36px verdana, sans-serif;

Скопируйте в CSS-файл с именем newcss3.css стили, которые вы хотели бы протестировать, и откройте HTML-файл из листинга 3.1 в своем браузере.

Источник