CSS3 — закругление углов

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

Синтаксис border-radius

CSS3 — border-radius
CSS3 — border-radius
CSS3 — border-radius
CSS3 — border-radius

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

css3 border radius 3 - CSS3 — закругление углов

Первое число — горизонтальное отклонение, второе — вертикальное. Линии соединят эти точки и получится своеобразное закругление. Пример последнего скриншота:

<div style="
border-top-left-radius:25px 100px;
border-top-right-radius:25px 100px; 
border-bottom-right-radius:25px 100px;
border-bottom-left-radius:25px 100px;
border:1px solid #ccc; 
width:500px; 
padding:30px 5px; 
font:20px arial; 
background:#ccc;">

border-top-left-radius:25px 100px; <br/>
border-top-right-radius:25px 100px; <br/>
border-bottom-right-radius:25px 100px; <br/>
border-bottom-left-radius:25px 100px; <br/>
Вертикально - 100, горизонтально - 25

</div>

Читайте также

Похожие записи

Скрипт идущего времени на jQuery
Задача: написать скрипт, который бы выводил текущую дату и время сервера. Время должно быть «идущим», т.е. имитировать реальную работу. Пример:...
Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *