Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Закругляем углы блоков

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

  1. border-radius:5px; - все углы закругляются на 5 пикселей;
  2. border-radius:5px 10px; - верхний левый и нижний правый углы закругляются на 5 пикселей, верхний правый и нижний левый углы закругляются на 10 пикселей;
  3. border-radius:5px 7px 10px; - верхний левый угол загнут на 5 пикселей, верхний правый и нижний левый углы загнуты на 7 пикселей, нижний правый угол загнут на 10 пикселей;
  4. border-radius:5px 7px 10px 12px; - верхний левый угол загнут на 5 пикселей, верхний правый загнут на 7 пикселей, нижний правый - на 10 пикселей и нижний левый угол загнут на 12 пикселей;

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

border-radius:5px/10px; - все углы закругляются на 5 пикселей по оси X, и на 10 пикселей по оси Y;

Если значение свойства border-radius задаётся через слэш, то первым значением является значение по оси X, а вторым - по оси Y. Ну что ж, рассмотрим пример.

<html>
 <head>
  <title>Блок с загнутыми углами.</title>
  <link rel="stylesheet" type="text/css" href="style14.css">
 </head>
 <body>
  <div></div>
 </body>
</html>

И таблица стилей.

div{
background-color:red;
width:200px;
height:200px;
border-radius:10px 15px 25px 35px
}

А вот и результат, прикольно, не правда ли?


<<Предыдущая | В раздел | Следующая>>