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

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

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

css3 border radius 1 - CSS3 — закругление углов
CSS3 — border-radius
css3 border radius 2 - CSS3 — закругление углов
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>

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

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