Как сделать закругленные углы в css

25.04.2018
Разное

ugol-8653011 ПоделитьсяTweetПоделитьсяGoogle

Всем привет! Сегодня речь пойдёт о закруглении углов объекта в HTML документе который отображает браузер. Для чего это нужно? Ну прежде всего для эстетики. На что только не пойдёшь чтобы лучше выглядеть. Представьте себе  если бы женщины ничего не делали чтобы выглядеть лучше… Мы бы уже выродились, поскольку педики потомство не дают, как сказал бы Жириновский:»Однозначно!!!»

Закругление можно сделать на всём, правда не везде оно лезет, или сказать лучше: «Ни в какие ворота не лезет»

Анекдот

Дутые цифры в отчетах удобны тем, что их легче округлять.

Есть такой атрибут в CSS как-  radius, с его помощью всё и закругляется.

Пишем блок

Сам блок с его содержимым

А затем прописываем стили

.radius {

  border: 2px solid CornflowerBlue;

  border-radius: 0px;

}

/* или (две записи равнозначны) */

.radius {

  border: 2px solid CornflowerBlue;

  border-top-left-radius: 0px;

  border-top-right-radius: 0px;

  border-bottom-right-radius: 0px;

  border-bottom-left-radius: 0px;

}

Все углы в радиусе я указал ноль пикселей — 0px ,  это значит квадрат. Если прописать значение, то угол закруглится на радиус этого значения. Чем больше значение, тем больше закругление. Если прописывать не равномерно, например

.radius {

  border: 2px solid CornflowerBlue;

  border-radius: 0px 33px;

}

/* или (две записи равнозначны) */

.radius {

  border: 2px solid CornflowerBlue;

  border-top-left-radius: 0px;

  border-top-right-radius: 33px;

  border-bottom-right-radius: 0px;

  border-bottom-left-radius: 33px;

}

то можно получить такую фигуру
2014-05-26_152959-9286013

Если прописать свойство один раз, то есть не прописывать конкретный угол, то закругляются все углы. Таким образом можно закруглить фон — бекграунд

2014-05-26_154607-2481688

div.radius {

  border-radius: 20px;

  background: #F6EA81;

}

Или сделать блок с тенью

2014-05-26_154628-1837971

div.radius {

  border-radius: 20px;

  box-shadow: 5px 5px #4262AC;

}

2.

3.

4.

5.

.

iframe width=»340″ height=»210″ style=»border-radius: 20px; box-shadow: #ffffff 1.4px 1.4px 0px,

rgba(23, 23, 23, 0.789063) 2.1px 2.1px 0px; box-sizing: border-box; border: 20px solid #1b1b1b;» src=»//www.youtube.com/embed/ixB2XsR9vuw?rel=0″

allowfullscreen=»allowfullscreen» frameborder=»0″>

Вот ещё примеры фигур прописаных кодом CSS

То есть фигуры без всяких там картинок, чистый HTML с CSS

2014-05-26_181010-3054069

2014-05-26_181539-8650329

      .radius {

        width: 200px; height: 200px;

        border: 7px dashed gold;

        border-radius: 100%/20%;

      }

      

     …

2014-05-26_182140-9496232

      

    .radius {

     width: 200px; height: 300px;

    border-radius: 80% / 100%

  100% 60% 60%;

    background: #D1A359;

  }

  

  …

Поиграйте со значением  border-radius добавляя параметры в процентах и получите разные фигуры.

На этом всё до следующего поста. :bye:

ПоделитьсяTweetПоделитьсяGoogle

ЧИТАТЬ:  Как узнать CMS сайта.

Метки: ,