Учебники

CSS3 — закругленные углы

Июль 11, 2018

CSS3 Закругленные углы используются для добавления специального цветного угла к телу или тексту с помощью свойства border-radius. Простой синтаксис закругленных углов выглядит следующим образом: 

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}

В следующей таблице приведены возможные значения закругленных углов следующим образом:

Sr.No. Значение и описание
1

граница радиуса

Используйте этот элемент для установки свойства радиуса четырех границ

2

границы левого верхнего радиуса

Используйте этот элемент для настройки границы верхнего левого угла

3

границы верхнего правого радиуса

Используйте этот элемент для установки границы верхнего правого угла

4

границы нижнего правого радиуса

Используйте этот элемент для настройки границы нижнего правого угла

5

Граница-нижний левый-радиус

Используйте этот элемент для настройки границы нижнего левого угла

граница радиуса

Используйте этот элемент для установки свойства радиуса четырех границ

границы левого верхнего радиуса

Используйте этот элемент для настройки границы верхнего левого угла

границы верхнего правого радиуса

Используйте этот элемент для установки границы верхнего правого угла

границы нижнего правого радиуса

Используйте этот элемент для настройки границы нижнего правого угла

Граница-нижний левый-радиус

Используйте этот элемент для настройки границы нижнего левого угла

пример

Это свойство может иметь три значения. В следующем примере используются оба значения —

Live Demo 

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body>
</html>

Это даст следующий результат —

Каждый уголок собственности

Мы можем указать каждое угловое свойство, как показано ниже в примере —

Live Demo 

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body>
<body>

Это даст следующий результат —

39
Share: