• RSS

Главная ›› Уроки по CSS, CSS3 ›› Закругленные углы у блоков в CSS3

Закругленные углы у блоков в CSS3

Технология CSS3 позволяет легко и просто создавать закругленные углы у блоков. Это делается с помощью свойства border-radius. Таким образом, закругленные углы можно делать для любых блочных элементов на веб-странице. Итак, давайте рассмотрим примеры.

Пример 1:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 10px;
}

Пример 2:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 10px 20px 30px 40px;
}

Пример 3:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 50%;
}

Результаты представлены на рисунке:

Закругленные углы у блоков в CSS3

Как видно, в первом примере мы закруглили углы блока на 10px. На втором примере мы задали разные значения border-radius для каждого из углов блока. И, наконец, в третьем примере мы сделали круг, задав всем углам блока радиус скругления 50%. Вот по такому принципу делаются закругленные углы у блоков в CSS3.

Поделиться ссылкой:


« 
 »

Читайте также:

Оставить комментарий


  • RSS

«Как создать и продвинуть свой сайт»

2011–2017 © Siteblogger.ru
Рейтинг@Mail.ru  
Наверх