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

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

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

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

Запуск Open Server. Создание пользователей в Open Server.
Запускаем Open Server от имени администратора, кликнув на ярлык запуска. После этого...
skaz - 0 - 5139
Создание шаблонов.
Программа Artisteer, автоматически генерирует конфигурацию шаблонов для таких...
skaz - 0 - 22269
Установка и настройка шаблонов Joomla.
  Normal 0 false false false...
skaz - 0 - 16913
Установка Денвера, настройка локального сервера.
Для установки Joomla на локальный сервер , лучше всего подойдет пакет Денвер содержит...
skaz - 2 - 4499
Скачать Artisteer v.4.0
И так сегодня наконец вышла долгожданная, новая версия Artisteer 4.0 В связи с тем,...
skaz - 63 - 33329
Joomla 3.6.X установка на Open Server.
В данной статье рассмотрим установку одного из популярных движков Joomla версий 3.Х.Х...
skaz - 0 - 2973