CSS3 закругленные углы, свойство border-radius

CSS3 Рейтинг: +1 Голосов: 1 8446 просмотров
CSS3 закругленные углы, свойство border-radius

Закругленные углы с использованием границ общие понятия.
Самый простой способ скругления углов border-radius, это задать значение <length>,
 закругляя все четыре угла блока.

Если же надо задать разные значения скругления для разных углов, используют более сложную конструкцию:

border-top-left-radius,
    border-top-right-radius,
    border-bottom-right-radius
    border-bottom-left-radius

 

То есть пишем конкретные значения по часовой стрелке начиная с верхнего левого угла.
На практике это может понадобится например для создания эллипса средствами CSS3, при задачи скругления таким способом,
Если мы зададим разное значение для верхнего, левого угла и нижнего левого, то произойдет плавное скругление в виде кривой.

На практике же чаще всего используется другая конструкция:

Рассмотрим на примере объекта без использования выделенных границ (border)

Вначале делаем квадратный объект средствами CSS3. То есть создадим обьект:

<div id=”test”></div>

Задаем для него стили:
   
#test{
background:#F00;
width:100px;
height:100px
}


Наш квадрат готов.


   
border-radius



Теперь зададим свойства закругления. Для этого используем: border-radius

   
#test{
width:100px;
height:100px;
border-radius:6px; 
-moz-border-radius:6px;
-webkit-border-radius:6px
}


В результате получаем:


CSS3 закругленные углы



немного разберем код:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;
-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).
Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.
-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;

Закругления для отдельных углов.

Допустим, вы хотите закруглить только нижние правый и левый угол.


Для этого изменим наш код:

#test{
width:100px;
height:100px;
border-radius: 0 0 6px 6px;
-moz-border-radius:0 0 6px 6px;
-khtml-border-radius: 0 0 6px 6px;
}


В результате получаем:



CSS3 закругленные углы



Разберем подробней:
   
border-radius: 1 2 3 4;

Где:

    1.Верхний левый угол;
    2.Верхний правый угол;
    3.Нижний правый угол;
    4.Нижний левый угол;


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

border: 1px solid #E6B00F;

Общий код станет таким:

#test{
width:100px;
height:100px;
border: 1px solid #E6B00F;
border-radius:6px; 
-moz-border-radius:6px;
-webkit-border-radius:6px
}


В результате мы получим квадрат обведенный желтой сплошной линией со скругленными углами.
При этом надо обратить внимание, что если граница не solid, а dotted и dashed в местах закруглений
должны отображаться точками или пунктирными линиями соответственно.
Gecko-браузеры вообще не поддерживают точки и пунктир в дугах и отображают их сплошной линией.
 Webkit-браузеры рисуют точки или пунктир, однако могут наблюдаться искажения.

Сделать изображение со скругленными углами CSS3 способами.
Цветовой фон и фон с изображениями обрезается по краям закруглений.
Если воспользоваться свойством overflow:hidden.
Однако это не все браузеры поддерживают.
Webkit поддерживает частично, Gecko, как и старые версии WebKit не поддерживают.

Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное в статьях

Как сделать сайт быстро и на пятерочку?
Создать собственный сайт – мечта многих, но далеко не все готовы приложить к...
skaz - 0 - 2084
Установка шаблонов Artisteer на Joomla 3.Х
В пред идущих статьях мы установили Joomla 3.Х на тестовый локальный сервер Open...
skaz - 2 - 2982
Как сменить кодировку с UTF-8 на кириллицу
Чтобы поменять кодировку страницы, напимер с UTF-8 на Windows-1251 (кириллицу),...
skaz - 0 - 53161
Основы для создания своего сайта
Много людей хотят свой сайт. Ежесекундно поисковые системы получают запросы типа...
skaz - 0 - 2143
Плагин Contact Form 7 для WordPress - создание формы обратной связи на блоге
Довольно часто вебмастер не хочет публиковать свои прямые контактные данные на сайте....
skaz - 0 - 6454
Сайты-доноры из Яндекс.Каталога и их влияние на тИЦ акцептора
Наращивание тИЦ является приоритетной задачей для всех веб-мастеров, которые хотят...
skaz - 0 - 4144