Закругленные углы

Закругленные углы

border-radius

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

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

Свойства -moz-border-radus и -webkit-border-radius не входят в спецификацию CSS, однако их использование в некоторых версиях браузеров обеспечивает работоспособность данного стиля.

Вы можете указать различные значения для каждого угла блока следующим образом:

border-top-right-radius;

border-bottom-right-radius;

border-top-left-radius.

<p>При записи альбома Pet Sounds был использован целый ряд нетрадиционных инструментов, таких как звонок велосипеда, орган, клавесин, флейты, свисток для собак, поезд, струнные инструменты с характерным гавайским звучанием, банки из-под Кока-Колы и лающие собаки.</p>

Вы также можете использовать стенографические свойства по часовой стрелке: правый угол,низ,левый угол, например  border-radius: 5px, 10px, 5px, 10px;


Эллиптические формы

border-radius

Для создания более сложный Форм вы можете задать различные расстояния для горизонтальных и вертикальных частей округлых углов.

Например данное выражение создаст закругление, ширина которого будет больше высоты:  border-radius: 80px 50px;


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

border-top-left-radius: 80px 50px;

Для одновременной настройки всех углов также существует стенографическое свойства:

Сначала вы указываете четыре горизонтальных значения, а затем четыре вертикальных.

Вы также можете создать круг, взяв за основу квадрат и задав его высоту в качестве значения свойства border-radius Смотрите форму на рисунке.

Понравилась статья? Поделиться с друзьями:
Блог  Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: