2013
27
Ноя

Скругление углов css



Ранее мы рассматривали скругление. Существуют различные способы скругления углов блока. Для оформления сайта нужны простые и быстрые способы. В настоящее время имеется свойство, с помощью которого можно быстро сделать скругление углов в CSS.

Для создания скругленных углов используют свойство border-radius

Свойство имеет несколько видов записи:

1. border-radius: 5px; /*один радиус для 4-х углов блока*/ 2. border-radius: 5px 4px 3px 6px; /*скругление углов: первый - радиус верхнего левого угла,остальные по часовой стрелке*/ 3. border-top-left-radius: 5px; /*радиус скругления верхнего левого угла*/ border-top-right-radius: 5px;/*радиус скругления верхнего правого угла*/ border-bottom-right-radius: 5px;/*радиус скругления нижнего правого угла*/ border-bottom-left-radius: 5px; /*радиус скругления нижнего левого угла*/

РЕЗУЛЬТАТ:

один радиус для 4-х углов блока

скругление углов: первый - радиус верхнего левого угла,остальные по часовой стрелке

радиус скругления верхнего левого угла

радиус скругления верхнего правого угла

радиус скругления нижнего правого угла

радиус скругления нижнего левого угла

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

1. border-top-left-radius: 25px; 2. border-top-left-radius: 25px 25px; 3. border-top-left-radius: 25px 50px; 4. border-top-left-radius: 50px 25px;

РЕЗУЛЬТАТ:

1
2
3
4

Свойство border-radius задает горизонтальную и вертикальную полуоси внешней дуги границы. Для большой толщины радиус внутреннего скругления высчитывают по формуле border-radius минус border-width (толщина границы). При получении отрицательного числа - внутренний радиус равен нулю. Это видно на рисунках:

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

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

Border-radius поддерживают не все браузеры. Для некоторых браузеров имеются свойства с приставкой -moz- и -webkit-.

border-radius: 8px; /* свойство для тех кто его поддерживает */ -moz-border-radius: 8px; /* для firefox */ -webkit-border-radius: 8px; /* для Safari и Chrome */