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

CSS3 Рейтинг: +1 Голосов: 1 8778 просмотров
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 в Blogger
Многие пользователи интернета успешно ведут свои блоги на сервисе Blogger, и для...
skaz - 0 - 5274
Open Server, создание базы данных.
В пред идущей статье мы создавали пользователя базы данных в Open Server. Теперь мы...
skaz - 0 - 12238
Особенности и преимущества Wordpress
Каждый начинающий вебмастер задается вопросом, какую CMS лучше всего выбрать. CMS...
skaz - 0 - 6315
Создание тем WordPress в Artisteer
В Artisteer можно быстро создать профессиональные темы WordPress , не имея...
skaz - 2 - 9401
Актуальные плагины Joomla для продвижения сайта
Система управления интернет-проектом Joomla считается не самым плохим движком для...
skaz - 0 - 6923
Сайты-доноры из Яндекс.Каталога и их влияние на тИЦ акцептора
Наращивание тИЦ является приоритетной задачей для всех веб-мастеров, которые хотят...
skaz - 0 - 4451