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

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

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

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

Установка шаблонов Artisteer на Joomla 3.Х с содержимым
Рассмотрим второй способ как установить шаблон Artisteer на установленную ранее, на...
skaz - 0 - 2922
Что такое программа Artisteer
Непосредственно по программе. Получая вопросы мной было замечено, что некоторые...
skaz - 0 - 13111
Раскручиваем сайт сами
Каждый владелец сайта сталкивается с понятием раскрутка сайта. И если преуспевающие...
skaz - 0 - 1927
Какие сайты можно сделать на Вордпресс?
Wordpress – это универсальный движок для создания сайтов, который позволяет...
skaz - 0 - 11752
Актуальные плагины Joomla для продвижения сайта
Система управления интернет-проектом Joomla считается не самым плохим движком для...
skaz - 0 - 6576
Понятие домена, виды доменов, выбор и регистрация домена
Присутствие любого предпринимателя в сети, если оно обусловлено продвижением бизнеса,...
skaz - 0 - 2517