ГРУППА КУРСА
|
Главная >
Учебник CSS >
Скругление углов блока в CSSУстановка скругленияCуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон. В CSS cкругление углов устанавливает свойство border-radius. В значении указывается радиус скругления в единицах, доступных в CSS. Создадим блок и зададим рамку со скруглёнными углами. Стиль: +
HTML код:
Скругление отдельных угловМожно скруглить любой угол отдельно. Для этого есть свойства: border-top-left-radius - скругление верхнего левого угла border-top-right-radius - скругление верхнего правого угла border-bottom-left-radius - скругление нижнего левого угла border-bottom-right-radius - скругление нижнего правого угла Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы: Стиль:
HTML код:
Краткая записьМожно указать радиусы скругления для углов более коротким способом. Для этого свойству border-radius указывается не одно значение, а четыре, через пробел.
Создадим блок и укажем ему радиусы скругления для каждого угла: Стиль:
HTML код:
Скругление в виде эллипсаСкругление угла может быть не только в виде части окружности, но и в виде части эллипса. При этом блок может выглядеть так: Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так: Стиль:
HTML код:
Для отдельных углов, такое скругление указывается по-другому. Горизонтальный и вертикальный радиус перечисляются через пробел. Пример: Стиль:
HTML код:
Скругление в процентахВ CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно. Пример: Стиль:
HTML код:
Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие: Такой блок создаётся очень просто. Для его создания нужно:
|