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

CSS3 Рейтинг: +1 Голосов: 1 8031 просмотр
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)

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

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

Особенности и преимущества Wordpress
Каждый начинающий вебмастер задается вопросом, какую CMS лучше всего выбрать. CMS...
skaz - 0 - 5762
Как установить компоненты и модули в Joomla
Если вы являетесь пользователем Joomla то устанавливать и удалять различные плагины и...
skaz - 0 - 4187
Как сделать магазин на Wordpress?
Как мы уже говорили в предыдущих статьях, на Wordpress можно создать не только обычный...
skaz - 11 - 7680
Установка шаблонов Artisteer на Joomla 3.Х
В пред идущих статьях мы установили Joomla 3.Х на тестовый локальный сервер Open...
skaz - 2 - 2426
Раскручиваем сайт сами
Каждый владелец сайта сталкивается с понятием раскрутка сайта. И если преуспевающие...
skaz - 0 - 1664
Artisteer 4.2.0.60483 Beta для Windows
Примечание: 21.10.2013 г. Вышел Artisteer 4.2 RC 2 для Windows ( 4.2.0.60609 )....
skaz - 0 - 7662