Особенности работы свойства border-radius. Принцип скругления углов. Элементы рамки-изображения border-image-slice
The border-radius property does not apply to table elements when have shared or separate borders."> border-collapse is collapse .
Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
Syntax
/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ 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; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px 5% / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: unset;The border-radius property is specified as:
- one, two, three, or four CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.">
or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> values. This is used to set a single radius for the corners. - followed optionally by "/" and one, two, three, or four
or Values. This is used to set an additional radius, so you can have elliptical corners.
Values
| radius | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-left-and-bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-right-and-bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
Border-radius: 1em/5em; /* ... is equivalent to: */ 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; /* ... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
Formal syntax
1,4 / 1,4where The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. Update compatibility data on GitHub Notes
Notes
Prefixed
Notes
Notes
Prefixed
Notes
Notes
Notes
Notes
Prefixed
Prefixed
Prefixed
Notes
Notes
Prefixed
Notes
Notes
Notes
Notes
Notes
Notes
Думаю, все знают, что сделать закругленные углы у блоков – большая проблема. Кросс-браузерного решения без применения JS костылей пока не существует. С релизом IE9 головной боли станет меньше, но если вы все еще кипятите верстаете под IE6/7, для вас это не станет спасением. Но даже если IE6/7 канут в лету, еще немало времени пройдет, пока мы забудем о 8-й версии этого браузера, который тоже не поддерживает параметр border-radius. Иными словами, сидеть на яваскриптовых стероидах наши сайты будут еще долго. Статей на тему округлых форм написано немало, но все они (те, что я смог найти), умалчивают о тонкостях и нюансах применения фиксов для существующей проблемы. Я постараюсь перечислить все те трудности, с которыми мне пришлось столкнуться при использовании популярных решений. Для начала, скажу пару слов о том, как изменяется ситуация с border-radius
при выходе новых версий браузеров. Во-первых, 4-я версия FireFox теперь не нуждается в своем собственном параметре -moz-border-radius. IE9, как я уже говорил, тоже реализует поддержку border-radius, во всяком случае, в RС версии она уже присутствует. В Opera все замечательно с версии 10.5. Теперь решения для тех, кого Бог обделил. И так, существует два наиболее известных и применяемых способа сделать border-radius кросс-браузерным
. Первый из них – Curved-corner , использующий VML и behaviour
. Второй – CSS3 PIE , который имеет две реализации. Одна также основана на VML и behaviour, вторая представляет из себя JavaScript библиотеку. Рассмотрим оба решения. Из плюсов я нашел только один – малый вес подключаемого border-radius.htc файла. Текущая версия реализации занимает всего 5кб. Против PIE, который весит 33 кб, безусловно, это значительное преимущество. Но на этом плюсы заканчиваются, во всяком случае для меня. Минусов очень много. Например, не будет работать такая вот конструкция:
#selector
{
border: #c6c5c2 1px solid;
border-top: none;
border-radius: 0 0 6px 6px;
background: #f0ecdf;
behavior: url(border-radius.htc);
}
Во-первых, нельзя убрать рамку с одной из сторон. То есть параметр border-top прибьет рамку вообще всего блока, хотя углы останутся закругленными. Забавно, но параметр border-bottom рамку оставит на месте, но эффекта никакого не даст, то есть бордер останется вокруг всего блока. Во вторых, если вам необходимо обтесать всего два угла, как в примере, то вас ждет разочарование. Curved-corner
такого не умеет. Он может закруглять только все углы блока и на равное значение радиуса. Углов с разным радиусом закругления добиться не получится. Правильные и рабочий вариант выглядит только так:
#selector
{
border: #c6c5c2 1px solid;
border-radius: 6px;
behavior: url(border-radius.htc);
}
В-третьих, Curved-corner не работает для блоков, у которых в качестве фона задано изображение. Ну последний неприятный момент – скорость работы. Углы закругляются далеко не сразу. С момента загрузки страницы и до того, как углы примут нужную форму, проходит около секунды. Визуально задержка очень заметна и хорошо бросается в глаза. Были еще какие-то проблемы (читайте нюансы), но сейчас уже не припомню. Резюмируя, можно сказать, что данный фикс подходит только для совсем простых задач. Хотя, как показывает практика, такие простые задачи попадаются редко. Весит много, ничего не скажешь. Версия PIE 1.0 beta 4 занимает 33 кб, как в реализации.htc, так и js аналог. Но при этом CSS3 PIE лишен всех тех проблем с border-radius, которые есть у Curved-corner. Также мне значительно импонирует возможность использовать JS реализацию, которая не требует дополнительного кода в CSS и может цепляться на любой селектор (при использовании jQuery, например). У CSS3 PIE задержка в отрисовке также присутствует (иногда нет), но значительно меньшая, чем в случае с Curved-corner. Она практически незаметна, что делает библиотеку весьма привлекательной и пригодной к использованию. Ну и самое замечательное заключается в том, что CSS3 PIE исправляет проблему не только с border-radius
, но и добавляет значительно количество свойств CSS3 в кривые майкрософтовские браузеры. Так, например, будут работать border-image и box-shadow, свойства работы с градиентами. Решается проблема прозрачности png и многое другое. Все это лихо компенсирует и объясняет размере CSS3 PIE. Увы, но ни CSS3 PIE, ни Curved-corner не способны заткнуть собой все щели. Так, например, круглых углов вы не получите у тех элементов, которые изначально скрыты – имеют параметр display: none . Аналогично с параметром visible и его значением hidden . Могут возникнуть проблемы, если элемент позиционируется абсолютно. Увы, дать детальное описание ситуации не могу, так как не удалось повторить условия, при которых возникали проблемы, но помню, что проблемы определенно были. Есть еще одна известная мне загвоздка. Для того, чтобы применить border-radius для элемента при наведении на него курсора мыши, например так: A:hover {
background: #ccc;
color: #000;
border: #ccc 1px solid;
border-radius: 6px
}
Необходимо, чтобы этот элемент имел закругленные углы изначально, иначе эффекта не будет. То есть, в данном примере, должен быть селектор A, у которого также будет задан border-radius и border: A {
background: #fff;
color: #000;
border: #fff 1px solid;
border-radius: 6px
}
a:hover {
background: #ccc;
color: #000;
border: #ccc 1px solid;
border-radius: 6px
}
Лично для меня, безусловным фаворитом является CSS3 PIE. Действительно справляется со своей задачей и делает это достойно. Ко всему прочему, библиотека развивается. Это развитие сопровождается регулярным выходом новых версий, что весьма обнадеживает. В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.
С выходом новой версии CSS3 решилась одна из самых сложных проблем в веб-дизайне. В новой версии продукта появилось новое свойство border-radius , с помощью которого можно легко округлять углы блока там, где это необходимо. Теперь верстальщики могут забыть о трудоемких процессах реализации такого простого решения, как скругление углов через тот же photoshop. Однако, как оказалось, не все браузеры были готовы к выходу новинки от CSS3. Некоторые из них не совсем корректно обрабатывают скругление, на лицо недоработки и промахи. Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome: Глядя на картинку в первую очередь можно отметить, что Firefox более плавно обрабатывает скругление, Chrome отрисовывает слегка угловатый полукруг. Также мы видим, что у хрома установленная рамка в некоторых местах просвечивается и видно заливку заднего фона. Ввиду этого необходимо расставить приоритеты при создании сайта. Либо следует отдать предпочтение простоте кода и быстрой загрузке веб страницы, что реализуется в случае использования border-radius , либо делаем уклон на красоту и аккуратность, что легко достигается при использовании бекграундных картинок. Стоит обратить внимание на то, что такие проблемы имеют место в старых версиях браузеров. В последних версиях такой недочет исправлен. В браузерах в той же степени могут возникнуть проблемы с применением свойства скругления углов как непосредственно к самой картинке, так и к ее родителю. Чтобы было понятно, привожу пример кода: #img p {
width:
200px;
height:
150px;
margin-
right:
20px;
overflow:
hidden;
border:
1px solid #f00;
border-
radius:
20px;
-
moz-
border-
radius:
20px;
-
webkit-
border-
radius:
20px;
margin:
0px auto;
}
Ожидали увидеть скругленную картинку с красной рамкой, а видим Однако, аналогично прошлому случаю, этой проблемой болеет поколение браузеров, которые постарше. Их потомки справляются отлично с таким кодом и свойство срабатывает как надо. Первое, что приходит в голову для того, чтобы решить эту проблему – это применить скругление углов не только для родителя, но и непосредственно к самой картинке. Причем, многие верстальщики поддерживают такую идею, я не раз натыкался на такое предложение в соответствующих форумах. Итак, записываем код: #img p {
width:
200px;
height:
150px;
margin-
right:
20px;
overflow:
hidden;
border:
1px solid #f00;
border-
radius:
20px;
-
moz-
border-
radius:
20px;
-
webkit-
border-
radius:
20px;
margin:
0px auto;
}
#img img {
border-
radius:
19px;
-
moz-
border-
radius:
19px;
-
webkit-
border-
radius:
19px;
}
Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка. Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет. Итак, вот код этого решения: width:
200px;
height:
150px;
margin-
right:
20px;
overflow:
hidden;
border:
1px solid #f00;
border-
radius:
20px;
-
moz-
border-
radius:
20px;
-
webkit-
border-
radius:
20px;
margin:
0px auto;
background:
url(img3.
jpg)
no-
repeat;
Теперь убедимся, что наш способ работает, пропускаем код через браузер Стоит отметить, что выход нового свойства в CSS3 значительно облегчил работу многим программистам. Однако, некоторые браузеры технически не были готовы к такому новшеству. Это выразилось в том, что одни из них некорректно осуществляли скругления, а другие не могли синхронизировать эффект между родителями и потомками. Но несмотря на это, с выходом новых версий браузеров постепенно разработчики исправили все свои недочеты, за что им отдельно спасибо. Сейчас в работе с border-radius не возникает практически никаких проблем. CSS3-рамка
дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы
элемента, а также использовать изображения
для оформления границ элемента. IE:
9.0 Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга
или эллипса
. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip . Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно. Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый
и нижний правый угол
, а второе — верхний правый
и нижний левый
. Значения, заданные через / , определяют горизонтальные
и вертикальные радиусы
. Свойство не наследуется. Варианты
Div {width: 100px; height: 100px; border: 5px solid;}
.r1 {border-radius: 0 0 20px 20px;}
.r2 {border-radius: 0 10px 20px;}
.r3 {border-radius: 10px 20px;}
.r4 {border-radius: 10px/20px;}
.r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;}
.r6 {border-radius: 10px 20px 30px 40px/30px;}
.r7 {border-radius: 50%;}
.r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;}
.r9 {border-bottom-left-radius: 100px;}
.r10 {border-radius: 0 100%;}
.r11 {border-radius: 0 50% 50% 50%;}
.r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
IE:
11.0 Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} . При помощи такого простого изображения можно получить вот такие рамки для элемента.
/* Пример 1 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: stretch;
}
/* Пример 2 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: round;
}
Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice . Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 . Синтаксис
Div {border-image-width: 30px;}
Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений
Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока. Синтаксис
Div {border-image-source: url(border.png);}
Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть. Синтаксис
Div {border-image-slice: 50 20;}
Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений. Синтаксис
Div {border-image-repeat: repeat;}
Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений
Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений. Синтаксис
Div {border-image-outset: 10px;}
Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline . Значением border-image может выступать не только изображение, но и градиентная заливка. В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .
Examples
border: solid 10px;
/* the border will curve into a "D" */
border-radius: 10px 40px 40px 10px;
border: groove 1em red;
border-radius: 2em;
background: gold;
border: ridge gold;
border-radius: 13em/3em;
border: none;
border-radius: 40px 10px;
border: none;
border-radius: 50%;
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
Live Samples
Specifications
Specification
Status
Comment
CSS Backgrounds and Borders Module Level 3
The definition of "border-radius" in that specification.
Candidate Recommendation
Initial definition
Initial value
Applies to
all elements; but User Agents are not required to apply to table and inline-table elements when have shared or separate borders."> border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
Inherited
no
Percentages
refer to the corresponding dimension of the border box
Media
visual
Computed value
as each of the properties of the shorthand:
Animation type
as each of the properties of the shorthand:
Canonical order
the unique non-ambiguous order defined by the formal grammar
Browser compatibility
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Edge Mobile
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
border-radius
Chrome
Full support
4 Edge
Full support
12 Full support
12
Full support
12 Firefox
Full support
4 IE
Full support
9
Opera
Full support
10.5 Safari
Full support
5 WebView Android
Full support
2 Edge Mobile
Full support
Yes Full support
Yes
Full support
Yes Firefox Android
Full support
4 Opera Android
Full support
Safari iOS
Full support
Yes
Elliptical borders
Chrome
Full support
Yes Edge
Full support
12
Firefox
Full support
3.5
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
Yes WebView Android
?
Chrome Android
Full support
Yes
Firefox Android
Full support
4
Safari iOS
?
Samsung Internet Android
Full support
Yes
4 values for 4 corners
Chrome
Full support
4
Edge
Full support
12
Firefox
Full support
Yes
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
5
WebView Android
?
Chrome Android
Full support
Yes
Edge Mobile
Full support
Yes
Firefox Android
Full support
Yes
Opera Android
No support
No
Safari iOS
?
Samsung Internet Android
Full support
Yes
Percentages
Chrome
Full support
Yes Edge
Full support
12
Firefox
Legend
Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
See also
Curved-corner
CSS3 PIE
Еще дегтя
Итоги
Проблемы с webkit-браузерами
Проблемы скруглений изображения
Выход из ситуации
Еще одно решение
В каких браузерах работает?
6.0+
4.0+
10.5+
4.0+
3.6+
-
-
Итог
Закруглённые углы и рамки-изображения
1. Закругление углов с помощью border-radius
Поддержка браузерами
Firefox:
4.0
Chrome:
4.0
Safari:
5.0, 3.1 -webkit-
Opera:
10.5
iOS Safari:
7.1
Opera Mini:
—
Android Browser:
4.1
Chrome for Android:
44
Рис. 1. Примеры различных вариантов закругления углов блока
2. Рамки-изображения border-image
Поддержка браузерами
Firefox:
15.0, 3.5 -moz-
Chrome:
16.0, 7.0 -webkit-
Safari:
6.0, 3.0 -webkit-
Opera:
15.0, 11.0 -o-
iOS Safari:
7.1
Opera Mini:
8 -o-
Android Browser:
4.4, 4.1 -webkit-
Chrome for Android:
42
Рис. 2. Пример оформления границ блока с помощью изображения
2.1. Ширина рамки-изображения border-image-width
border-image-width
Значения:
длина
Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число
Числовое значение, на которое умножается значение border-width .
%
Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
auto
Соответствует значению border-image-slice .
initial
inherit
2.2. Ресурс рамки-изображения border-image-source
2.3. Элементы рамки-изображения border-image-slice
Значения:
число
Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой.
Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество px .
%
Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
fill
Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial
Устанавливает это свойство в значение по умолчанию.
inherit
Наследует значение этого свойства от родительского элемента.
Рис. 4. Пример задания срезов рамки-изображения
2.4. Повтор рамки-изображения border-image-repeat
2.5. Смещение рамки-изображения border-image-outset
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений
3. Смещение внешней рамки outline-offset
Рис. 7. Пример оформления изображения внешней рамкой
4. Градиентная рамка
Полупрозрачная рамка
Почтовый конверт
В последнее время я пытался переосмыслить правила CSS, которые я принял в своей практике. Я написал огромное количество кода без реального понимания того, почему он работает именно так.
Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?
Идеальные круги в CSS
Общепринятый шаблон в дизайне, который мы часто видим на сайтах - это идеальный круг. Иногда круг имеет какой-либо цветовой фон или изображение в качестве фона.CSS круги на Rdio, Dribbble, и Codecademy
Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом - создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.
Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius , процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.
Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)
Как же действительно работает border-radius?
Иногда я вижу реализацию данной дизайнерской задумки путем установки border-radius в 100%. Я сам сделал также в своем проекте несколько дней назад, даже не задумываясь. Это выглядело точно также, образуя идеальный круг. Но почему?Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.
Вывод
Если установить радиус границы в 100% для всех углов элемента, браузер за кулисами выполнит дополнительную работу, чтобы масштабировать углы до тех пор, пока они не сойдутся. Я не уверен, есть ли какие-то последствия в плане производительности при установке border-radius в 100% для всех ваших кругов.По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.
А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…
Теги: css, border-radius
