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>

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

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

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

Комментарии

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

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