Содержание

border-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

Краткая информация

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа, относительно ширины блока
ПрименяетсяКо всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает радиус скругления уголков рамки.

Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1
Радиус указывается для всех четырех уголков.
2Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0.
5em/1em 0.5em; </div> <div> border-radius: 8px; </div> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

Скругление углов в CSS

Установка скругления

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius. Значением этого свойства является радиус скругления, указанный в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

Стиль:

+

7
8
9
10
11
12

#div1
  {
  border: 1px solid Red;
  padding: 20px;
  border-radius: 10px;
  }

HTML код:

16

<div>Блок со скруглёнными углами</div>

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Для примера создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

Стиль:

13
14
15
16
17
18
19
20

#rightrad
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 20px;
  }

HTML код:

25

<div>Блок с отдельными скруглёнными углами</div>

Краткая запись

Можно указать радиусы скругления для углов более коротким способом. Для этого свойству border-radius указывается не одно значение, а четыре, через пробел.

  • Сначала идёт верхний левый угол
  • затем верхний правый
  • затем нижний правый
  • затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

Стиль:

21
22
23
24
25
26
27

#allradius 
  {
  border-radius: 10px 5px 12px 21px;
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  }

HTML код:

33

<div>Скругление всех углов по отдельности</div>

Скругление в виде эллипса

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

Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так:

Стиль:

28
29
30
31
32
33
34

#elradius
  {
  width: 300px;
  height: 50px;
  background-color: #CCC;
  border-radius: 80px/20px;
  }

HTML код:

41

<div></div>

У свойств, устанавливающих скругление отдельных углов, такое скругление указывается по-другому.

Горизонтальный и вертикальный радиус перечисляются через пробел. Пример:

Стиль:

35
36
37
38
39
40
41

#elk
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-bottom-left-radius: 50px 15px;
  }

HTML код:

49

<div>Скругление в виде эллипса</div>

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

Пример:

Стиль:

42
43
44
45
46
47
48

#pr
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px; 
  border-bottom-left-radius: 35%;
  }

HTML код:

57

<div>Скругление в процентах</div>

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров.

Например такие:

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

  1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
  2. Задать фон блока.
  3. Установить скругление всех углов 50 процентов.

border-radius — закругленная рамка (скругление углов)

Поддержка браузерами

12.0+ 9.0+ 4.0+ 5.0+ 10.5+ 5.0+

Описание

CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:

Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:

  • border-radius: 5px 10px 15px 20px; (4 значения)
    1. Верхний левый – 5px
    2. Верхний правый – 10px
    3. Нижний правый – 15px
    4. Нижний левый – 20px
  • border-radius: 10px 20px 15px; (3 значения)
    1. Верхний левый – 10px
    2. Верхний правый и нижний левый – 20px
    3. Нижний-правый – 15px
  • border-radius: 15px 5px; (2 значения)
    1. Верхний левый и нижний правый – 15px
    2. Верхний правый и нижний левый – 5px
  • border-radius: 13px; (1 значение)
    1. Радиус для всех четырёх углов – 13px

Овальные скругления

CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ /:


border-radius: 50px / 30px;

Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

  • border-radius: 55px 45px 40px / 35px 20px;
    1. Верхний левый – 55px / 35px
    2. Верхний правый и нижний левый – 45px / 20px
    3. Нижний правый – 40px / 35px

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

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

Значение по умолчанию: 0
Применяется: ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse;
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.borderRadius=»5px»

Синтаксис

border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]

Значения свойства

Значение Описание
величина Величина радиуса указывается в единицах измерения, используемых в CSS.
% Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-radius: 100px;
}

Закруглённые углы (свойство border-radius) | CSS — Примеры

Генератор border-radius CSS

<style>
.radius {
  border: 2px solid CornflowerBlue;
  border-radius: 0 ;
}



.radius {
  border: 2px solid CornflowerBlue;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
</style>

<div>содержимое блока с закруглёнными углами</div>

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

Использование свойства CSS border-radius (w3. org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

<div>содержимое блока</div>

Круглые углы у картинки

border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.

<img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg" style="border-radius: 100%;">

Закруглить края у видео на YouTube

<iframe src="http://www.youtube.com/embed/fXwUPXY9eaY?rel=0" frameborder="0" allowfullscreen style="border: 20px solid #1b1b1b; border-radius: 20px; box-sizing: border-box;"></iframe>

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

123
1. 12.13.1
1.22.23.2
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
    <tr>
      <td>1.1</td>
      <td>2.1</td>
      <td>3.1</td>
    </tr>
    <tr>
      <td>1.2</td>
      <td>2.2</td>
      <td>3.2</td>
    </tr>
</table>

border-radius у вложенных элементов

Сравните

<div><div></div></div> <div></div> <div><div></div></div>

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

внешний радиус = внутренний радиус + ширина рамки

47px = 32px + 15px

CSS скругление углов у border-image

Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.

<div> <div> <div>содержимое блока</div> </div> </div>

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

<style> .radius { height: 200px; border: 7px solid red; border-radius: 100%; } </style> <div>...</div>

HTML круг

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

  
      <style>
      .radius {
        width: 200px; height: 200px;
        border: 7px solid red;
        border-radius: 100%; 
      }
      </style>

     <div>...</div>

HTML цилиндр

  
      <style>
      .radius {
        width: 200px; height: 200px;
        border: 7px dashed red;
        border-radius: 100%/20%; 
      }
      </style>

     <div>. ..</div>

Закругленные три края, HTML капля

<style>
.radius {
  width: 200px; height: 200px;
  border: 7px inset red;
  border-radius: 0% 100% 100%;
}
</style>

<div>...</div>

HTML полукруг




<style>
.radius {
  width: 200px; height: 200px;
  border: 1px dashed red;
  border-radius: 100% 100% 0% 0%;
}
</style>

<div>...</div>

HTML лист




<style>
.radius {
  width: 200px; height: 200px;
  border: 7px groove red;
  border-radius: 70% 0 / 70%;
}
</style>

<div>...</div>

HTML яйцо






  <style>
  .radius {
    width: 200px; height: 300px;
    border-radius: 80% / 100% 100% 60% 60%; 
    background: #f1f1f1;
  }
  </style>

  <div>...</div>

Камушек HTML



   <style>
   .radius {
     width: 200px; height: 200px;
     border-radius: 60% 80% / 100% 90% 60% 50%;
     background: #f1f1f1;
   }
   </style>

   <div>. ..</div>

Слайды с конференции

Как закруглить углы изображения на CSS без Фотошопа — Технический блог

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:

border-radius: 10px;

Для наглядности нарисуем два блока с прямыми и скругленными углами:

Блок с прямыми углами

Блок с закругленными углами

Закругление углов у картинок

По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh

Вот изображение без CSS обработки

А теперь с загругленными углами:

border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

border-radius: 10px;
border: 5px #ccc solid;

а затем и тени:

border-radius: 10px;
border: 5px #ccc solid;
box-shadow: 0 0 10px #444;

Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:

border-radius: 10px;
box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

border-radius: 50%;
border: 5px #cfc solid;
box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

<img src="/wp/wp-content/uploads/2016/01/humor/humor01.jpg">

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:


.alignnone {
border-radius: 10px; 
border: 5px #cfc solid; 
box-shadow: 0 0 10px #444;
}

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:


img {
border-radius: 10px; 
border: 5px #cfc solid; 
box-shadow: 0 0 10px #444;
}

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.

Как в css закруглить углы

3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style. Для картинки это будет выглядеть так:

Закругление углов CSS: свойство border-radius — учебник CSS

В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; }

Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:

  • border-top-left-radius — для верхнего левого угла;
  • border-top-right-radius — для верхнего правого угла;
  • border-bottom-left-radius — для нижнего левого угла;
  • border-bottom-right-radius — для нижнего правого угла.
Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px, закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:

Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

Скругление углов CSS

Приветствую вас, дорогие читатели!

Довольно часто, при верстке страниц, в зависимости от дизайна, появляется необходимость в скруглении углов блоков и изображений для придания странице более аккуратного вида. В сегодняшней статье я покажу вам, как это можно сделать с помощью CSS-свойств.

Навигация по статье:

Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:

.radius-block{ border-radius: 25px; }

.radius-block{

border-radius: 25px;

}

В данном случае для блока задается параметр для всех сторон.

Равномерное закругление

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

.radius-block2{ border-radius: 5px 15px 25px 35px; }

.radius-block2{

border-radius: 5px 15px 25px 35px;

}

Разное закругление

Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

Если вам нужно, к примеру, симметрично скруглить два противоположных угла по диагонали, то можно задать только два параметра:

.radius-block3{ border-radius: 5px 35px; }

.radius-block3{

border-radius: 5px 35px;

}

Симметричное закругление

В данном случае первый параметр работает для верхнего левого и правого нижнего, а второй – для верхнего правого, и нижнего левого.

Необычное скругление углов CSS

Еще у свойства border-radius есть одна интересная особенность. Вы можете задавать радиус скругления не только для какого-то конкретного угла, но и для вертикальной и горизонтальной половины угла.

Для этого нам нужно задать два параметра скругления через слеш. Например:

.radius-block4{ border-radius: 60px/25px; }

.radius-block4{

border-radius: 60px/25px;

}

Необычное закругление

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

. radius-block5{ border-radius: 250px/75px; }

.radius-block5{

border-radius: 250px/75px;

}

Элипс

Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

Если эта статья вам понравилась, и вы хотите меня поддержать, обязательно поделитесь ссылкой в социальных сетях и оставьте комментарий.

А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!

С уважением Юлия Гусарь

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

Четвертые части каждой окружности формируют закругленные углы элемента.

Когда объединяются толстые рамки

При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее .mike { border-radius: 12px; border: 6px solid crimson; }
  border: 6px solid crimson;

Пока нет проблем.

Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.

.mike { border-radius: 12px; border: 14px solid crimson; }
  border: 14px solid crimson;

Рамка становится шире, а углы изображения – квадратными.

Почему так происходит?

Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.

.mike { border-radius: 26px; border: 14px solid crimson; }
  border: 14px solid crimson;

При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.

Метод Box-shadow

При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.

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

.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }
  box-shadow: 0 0 0 14px crimson;

Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.

Применение переменных Sass

Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.

$border-width: 14px; $radius: $border-width*1.9; .mike { border: $border-width solid crimson; border-radius: $radius; }
$radius: $border-width*1. 9;    border: $border-width solid crimson;
Заключение

Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.

Автор: Guil Hernandez

Источник: http://blog.teamtreehouse.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как закруглить углы в CSS

Вы, конечно же, знаете, что в HTML-ле нет возможности создавать закругленные углы. Но необходимость в них велика. Поэтому верстальщики выдумали не один способ, чтобы закруглить угол, и самый простой и популярный из них, когда в крайние ячейки таблицы сайта помещались картинки углов.

По некоторым наблюдениям почти в 80% дизайнерских работ используются плавные линии. Закругленный угол тоже считается плавной линией. Получается, что визуальная мягкость и красота закругленного угла более востребована, нежели жесткость прямого угла, которая нужна лишь в определенных случаях.

К слову говоря, специалисты по дизайну жилых помещений считают, что закругленные углы помогают визуально расширить пространство комнаты. Пожалуй, этот визуальный фокус вполне применим и к сайтам.

Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!

Для примера вот у нас есть такая кнопка:

Код кнопки (HTML):

<input type="button" value="Сообщение!"/>

Код кнопки (CSS):


.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}

Чтобы закруглить углы, пропишите в CSS «border-radius»:

border-radius: 20px;

готовый код:


<html>
<head>
<title>Заголовок страницы</title>
<style>
. knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
border-radius: 20px;
}
</style>
</head>
<body>
<input type="button" value="блог BlogGood.ru"/>
</body>
</html>

Результат будет таким:

Как видите, закруглились четыре угла на 20 px.

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

border-radius: 20px 20px 0 0;

Начинаете с левого верхнего угла и по часовой.

В результате вы увидите:

Закруглилось два верхних угла.

Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел…

Чтобы избежать такого, добавьте border-radius под популярные браузеры:


-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Google Chrome */
-khtml-border-radius: 10px; /* KHTML */
-o-border-radius: 10px; /* Opera */
-ms-border-radius: 10px; /* IE8 */
-icab-border-radius: 10px; /* Icab */
border-radius: 10px; /* CSS3 */

… и все заработает.

А сейчас парочка примеров того, что можно сотворить, используя закругление углов.

  • Закругленная кнопка
    Для CSS:
    
    .knopka2
    {
    color:#fff;
    padding:10px;
    background-color:#008B00;
    border:1px solid #999;
    border-radius: 0 57px 0 57px;
    }
    

    Для HTML:

    <input type="button" value="кнопка"/>

    Результат:

  • Закругление картинки
    <img src="https://bloggood.ru/wp-content/uploads/2013/03/Webmasterok2009_avatar-96x96.jpg">

    Результат:

  • Анимированное закругление картинки (смотрите тут)

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


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, для сайта, основы

закругленных углов изображений | IANR Media

Свойство CSS border-radius добавляет закругленные углы к изображениям. Вы можете скруглить все углы изображения или просто выбрать углы, изменить радиус в разных углах или отобразить изображение в форме овала или круга.

1. Добавьте изображение на свою страницу.

Нужна помощь при вставке изображения?

2. Добавьте класс к вашему изображению

Таким образом, ваши стили будут нацелены только на элементы с этим классом.

Примечание: Если вы используете сетку на своей странице и хотите, чтобы изображение всегда занимало всю ширину столбца, в котором оно находится, также добавьте класс dcf-w-100%

3.Уложите углы.

Свойство CSS border-radius добавляет закругленные углы.

  img. Round-corners {
  радиус границы: 30 пикселей;
} 
 

Вот как это выглядит:

Вы можете поэкспериментировать с разными значениями, чтобы получить то, что вам нравится.


радиус границы: 5 пикселей;
радиус границы: 50 пикселей;
радиус границы: 75 пикселей;

Если вы хотите, чтобы это был круг, добавьте border-radius: 50%; . Это сделает круг только в том случае, если вы начнете с квадратного изображения.


радиус границы: 50%;
радиус границы: 50%;

Если вы хотите, чтобы разные углы изображения были закруглены по-разному, их можно настроить индивидуально. В предыдущих примерах, когда вы объявляли одно значение для border-radius, оно применялось ко всем углам. Но вы можете перечислить четыре разных значения для разных углов.

1234
радиус границы: 10 пикселей 20 пикселей 30 пикселей 40 пикселей;

Порядок чисел идет по часовой стрелке, начиная с верхнего левого угла: верхний левый, верхний правый, нижний правый, нижний левый.

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


радиус границы: 120 пикселей 20 пикселей 120 пикселей 20 пикселей;
радиус границы: 40px 40px 0 0;
радиус границы: 0 50% 50% 50%;

4.

Когда углы будут выглядеть так, как вы хотите, добавьте свои стили в CSS вашего сайта.

Внутри UNLcms перейдите в раздел «Внешний вид» своего сайта и нажмите «Настройки».

Вставьте свои стили в поле CSS вверху, затем прокрутите страницу вниз и нажмите «Сохранить конфигурацию».

Готовый продукт


  Cat  
  img. Round-corners {
  радиус границы: 30 пикселей;
}  

CSS Закругленные углы: пошаговое руководство

При разработке веб-страницы вы можете захотеть, чтобы у элемента были закругленные углы. Например, если вы добавляете фотографию владельца компании на веб-страницу, вы можете захотеть, чтобы у изображения были закругленные углы, чтобы сделать его более эстетичным.

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

В этом руководстве на нескольких примерах обсуждается, как использовать свойство border-radius для добавления скругленных углов к элементу в CSS.

CSS Border Radius

Border — это линии, окружающие внешний край веб-элемента.

В CSS свойство границы используется для указания того, как граница должна отображаться на веб-странице.Если вы хотите узнать больше о том, как создавать границы в CSS, прочтите наше руководство по границам CSS.

CSS Установить отдельные скругленные углы

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

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Эти свойства используются для установки граница вокруг определенного угла веб-элемента.Каждый элемент принимает значение длины в пикселях, em, другое измерение длины или процентное значение (%).

Давайте рассмотрим пример, чтобы проиллюстрировать, как работают эти свойства.

Нам было поручено разработать коробку с закругленными верхними левыми и нижними правыми углами. Наш блок должен иметь сплошную голубую границу размером 3 пикселя. Верхний левый угол должен быть закруглен на 20 пикселей, а нижний правый угол — на 10 пикселей. Мы могли бы использовать следующий код для создания этого блока:

 index.html

Это коробка.

 styles. css

.коробка {
граница: 3px сплошной светло-голубой;
граница-верх-левый-радиус: 20 пикселей;
граница-нижний-правый-радиус: 10 пикселей;
} 

Наш код возвращает:

В нашем HTML-коде мы создали поле с помощью тега

. Это поле содержит тег

, в котором текст Это поле . хранится. Нашему тегу

назначен класс box , что означает, что стили CSS, которые мы применяем к классу box , будут применены к тегу
.

В нашем файле CSS мы определили, что любой элемент с классом box должен иметь:

  • Сплошная голубая граница шириной 3 пикселя.
  • Верхний левый угол, округленный на 20 пикселей.
  • Нижний правый угол, округленный на 10 пикселей.

Если вы посмотрите на изображение выше, вы увидите, что наши верхний левый и нижний правый углы скруглены. Левый верхний угол был закруглен на 20 пикселей, а правый нижний угол — на 10 пикселей.

CSS Border Radius Shorthand

Свойство border-radius является сокращением для четырех подсвойств, которые мы обсуждали ранее.

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

Синтаксис свойства border-radius зависит от того, сколько значений вы укажете. Давайте рассмотрим пример каждого из возможных способов использования свойства border-radius для добавления закругленных углов к элементу.

Одно значение

Если вы хотите применить одинаковый радиус границы к каждому углу элемента, вам нужно указать только одно значение при использовании свойства border-radius.

Предположим, вы хотите создать рамку с радиусом границы 20 пикселей по всем углам. Вы можете сделать это с помощью этого кода:

 . box {
радиус границы: 20 пикселей;
граница: 3px сплошной светло-голубой;
высота: 200 пикселей;
ширина: 200 пикселей;
} 

Наш код возвращает:

В этом примере мы создали блок высотой 200 пикселей и шириной 200 пикселей. Наш блок имеет сплошную светло-синюю рамку размером 3 пикселя. Мы также использовали свойство border-radius, чтобы добавить эффект округления на 20 пикселей к каждому углу в нашем блоке.

Два значения

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

Порядок, в котором применяются указанные вами значения округления:

  • Первое значение — это величина, на которую вы хотите, чтобы верхний левый и нижний правый углы были округлены.
  • Второе значение — это величина, на которую нужно округлить верхний правый и нижний левый углы поля.

Предположим, вы хотите, чтобы верхний левый и нижний правый углы рамки были закруглены на 20 пикселей, а нижний левый и верхний правый углы — на 10 пикселей.Вы можете создать этот ящик, используя следующий код:

 .box {
радиус границы: 20 пикселей 10 пикселей;
граница: 3px сплошной светло-голубой;
высота: 200 пикселей;
ширина: 200 пикселей;
} 

Наш код возвращает:

В нашем примере мы указали два значения с помощью свойства border-radius. Первое значение используется для установки закругления кромки верхнего левого и нижнего правого углов на 20 пикселей. Второе значение используется для установки закругления углов для левого нижнего и правого верхнего углов на 10 пикселей.

Три значения

Если вы хотите назначить прямоугольнику закругленные углы, где верхний левый угол имеет собственное закругление, верхний правый и нижний левый углы имеют собственное закругление, а нижний правый угол имеет собственное закругление, вы можете указать три значения со свойством border-radius.

Порядок, в котором указанные вами три значения применяются к блоку, следующий:

  • Первое значение — это округление для верхнего левого угла.
  • Второе значение — это округление для верхнего правого и нижнего левого углов.
  • Третье значение — это округление правого нижнего угла.

Предположим, мы создаем блок, который должен иметь следующие округления:

  • Верхний левый угол должен быть округлен на 30 пикселей.
  • Правый верхний и левый нижний углы должны быть скруглены на 20 пикселей.
  • Правый нижний угол должен быть скруглен на 10 пикселей.

В приведенном ниже примере мы создаем прямоугольник, который использует эти скругления углов. Мы также применяем светло-синюю рамку вокруг нашего блока и устанавливаем его размер 200 пикселей в ширину и 200 пикселей в длину. Вот код, который мы могли бы использовать для создания нашего бокса:

 .box {
радиус границы: 30 пикселей 20 пикселей 10 пикселей;
граница: 3px сплошной светло-голубой;
высота: 200 пикселей;
ширина: 200 пикселей;
} 

Наш код возвращает:

Верхний правый и нижний левый углы имеют одинаковое округление.Верхний левый угол имеет собственное закругление, а нижний правый угол также имеет собственное закругление.

Четыре значения

Допустим, вы создаете прямоугольник, углы которого должны быть скруглены с использованием четырех разных значений. Вы можете скруглить углы рамки, указав четыре значения в свойстве border-radius. Указанные вами значения будут интерпретироваться в следующем порядке:

  • Первое значение применяется к верхнему левому углу.
  • Второе значение применяется к правому верхнему углу.
  • Третье значение применяется к нижнему правому углу.
  • Четвертое значение применяется к нижнему левому углу.

Предположим, мы хотим создать блок с закруглением на 5 пикселей в верхнем левом углу, закруглением на 10 пикселей в верхнем правом углу, закруглением на 15 пикселей в правом нижнем углу и закруглением на 20 пикселей в нижнем левом углу. Наше поле должно быть 200 пикселей в ширину на 200 пикселей в длину и иметь сплошную голубую границу шириной 3 пикселя.

Мы можем создать этот ящик, используя следующий код:

. коробка {
радиус границы: 5 пикселей 10 пикселей 15 пикселей 20 пикселей;
граница: 3px сплошной светло-голубой;
высота: 200 пикселей;
ширина: 200 пикселей;
} 

Наш код возвращает:

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

Эллиптические углы

В наших примерах выше мы использовали радиус границы для создания закругленных углов. Мы также можем использовать свойство border-radius для создания эллиптических границ.

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

 border-radius: горизонтальный радиус / вертикальный радиус; 

Предположим, мы хотим создать 25% -ный эллиптический угол вокруг горизонтальных углов коробки и 50% -ный эллиптический угол вокруг вертикальных углов коробки. Наше поле должно быть 200 пикселей в ширину и 200 пикселей в длину и иметь светло-синюю рамку. Это можно сделать с помощью этого кода:

 .box {
радиус границы: 25% / 30%;
граница: 3px сплошной светло-голубой;
высота: 200 пикселей;
ширина: 200 пикселей;
} 

Наш код возвращает:

Как видите, мы создали форму с эллиптическими закругленными углами.

Заключение

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

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

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


Поделиться Dreamweaver Артикул:

Когда-то использование изогнутых углов или закругленных краев в дизайне веб-сайтов с использованием только CSS было бы легендой. Вместо этого изображения должны быть имитирующими углы и размещаться в качестве фоновых изображений. Это была долгая и трудная задача.

Теперь вполне возможно создавать изогнутые края или закругленные углы с помощью CSS. Кстати, если вы просматриваете эту страницу в Internet Explorer, вы не сможете увидеть закругленные углы css в поле над этим абзацем.

Изогнутые края css в этом руководстве по CSS созданы с использованием новых возможностей CSS3. Любой браузер, использующий префикс Moz или Webkit, сможет отображать закругленные углы CSS3. Закругленные углы CSS с использованием атрибута Moz будут отображаться в Firefox, SeaMonkey, Flock и любом другом браузере, который использует движок рендеринга Gecko. И наоборот, закругленные углы CSS с префиксом Webkit будут отображаться в Google Chrome и Safari.

Internet Explorer и Opera работают над поддержкой CSS3, пока вы читаете это, но закругленные края CSS не будут отображаться в этих браузерах в настоящее время.

1. Создайте div для практики изогнутых краев CSS

Давайте создадим простой div и зададим ему цвет фона, чтобы практиковаться в стилизации закругленных углов CSS. Вы должны скопировать и вставить этот код на веб-страницу:


    

Вопреки распространенному мнению, Lorem Ipsum - это не просто случайный текст. Он имеет корни в классическом Латинская литература с 45 г. до н.э., что составляет более 2000 лет Старый.

2.Используйте CSS для закругления всех четырех углов

Скопируйте и вставьте этот CSS с добавленными атрибутами закругленных углов CSS3 в таблицу стилей, прикрепленную к вашей веб-странице.

Для высоты div задано значение auto с шириной 150 пикселей. Также был установлен цвет фона, поэтому вы можете видеть закругленные углы css на белом фоне. Поля и отступы также были установлены для настройки содержимого абзаца внутри div.

Добавлен дополнительный стиль абзаца, который вы можете скопировать и вставить, если хотите.



 .corners {
  
    высота: авто;
    ширина: 150 пикселей;
    фон: # 8BBEA9;
    маржа: 20 пикселей;
    отступ: 30 пикселей;
    -moz-border-radius: 15 пикселей; /* Fire Fox */
    -webkit-border-radius: 15 пикселей; / * Safari и Chrome * /
 
 }

 
 / * Необязательный стиль абзаца * /

 .corners p {
 
тень текста: 1px 1px 1px #FFF;
выравнивание текста: выравнивание;
размер шрифта: 16 пикселей;
маржа: 0;
        отступ: 0;
    
 }
  
 

Если вы скопировали и вставили код правильно, у вас должен получиться div в таком стиле со всеми четырьмя изогнутыми углами, стилизованными с использованием css.

Из этого примера вы увидите, что теперь все четыре угла блока div закруглены с использованием CSS. Стилизация всех четырех изогнутых краев CSS с помощью CSS3 — это нормально, но что, если вы хотите стилизовать только два угла, или как насчет только одного стилизованного угла с помощью CSS3?

CSS3 Индивидуальный стиль закругленных краев

Чтобы стилизовать отдельные углы, вам необходимо знать следующие атрибуты закругленных углов CSS3. Синтаксис, используемый между закругленными углами css с префиксом Moz и закругленными углами css с префиксом Webkit, немного отличается.Ожидайте, что они будут объединены в один общий термин, как только CSS3 будет полностью кроссбраузерным.

Вот стили CSS с закругленными углами для префикса Moz, которые используют Firefox, Flock, SeaMonkey и все другие современные движки рендеринга Gecko:

  / * Стили для Firefox, Flock и SeaMonkey * /


    -moz-border-radius-topleft: 15 пикселей;
  
    -moz-border-radius-topright: 15 пикселей;
  
    -moz-border-radius-bottomleft: 15 пикселей;
 
    -moz-border-radius-bottomright: 15 пикселей;

 

Вот стили CSS с закругленными углами для движка Webkit, которые используют Chrome и Safari:


  / * Стили для Google Chrome и Safari * /

    -webkit-border-top-left-radius: 15 пикселей;

    -webkit-border-top-right-radius: 15 пикселей;

    -webkit-border-bottom-left-radius: 15 пикселей;

    -webkit-border-bottom-right-radius: 15 пикселей;


 
Примеры отдельных изогнутых углов CSS

Чтобы применить отдельные углы CSS3, просто выберите каждый атрибут изогнутого угла, который вы хотите, и примените его к стилям div. Большинство углов, которые вы применяете, будут иметь размер от 5 до 90 пикселей, но вы можете пойти и до 200 пикселей, если хотите.

Этот div имеет углы в правом верхнем и левом нижнем

Этот div был разработан так, чтобы радиус нижнего левого угла больше, чем

верхнего правого угла.

Не забудьте применить и префикс Webkit, и префикс Moz, если вы хотите, чтобы закругленные углы CSS отображались в большинстве основных браузеров.


Связанные руководства:

CSS3 Закругленные углы — видеоурок

CSS3 Text Shadows — Видеоурок

CSS3 Box Shadows — видеоурок

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

Сегодня на работе меня спросили, можно ли сделать перевернутые закругленные углы на элементе с помощью CSS3, и это была небольшая забавная задача.Я подумал, может быть, я обнаружу, что у радиуса границы есть свойство «вставки», которое можно применить, и W3C, вероятно, должен был подумать о добавлении этого. Ну что ж, это все же оказалось относительно простым, и я подумал, что запишу документ на случай, если это поможет кому-то еще.

В разметке HTML было всего 2 элемента:

 

Некоторый текст в поле

Тег P может быть любым элементом, если класс включен, поэтому применяется CSS. CSS использует псевдоэлементы: before и: after для вырезания углов:

 body {
фон: #fff;
}
.коробка {
фон: # b2b2b2;
высота: 60 ​​пикселей;
ширина: 210 пикселей;
маржа: 25 пикселей;
отступ: 20 пикселей;
положение: относительное;
переполнение: скрыто;
}
.box: before {
содержание: "";
дисплей: блок;
фон: #fff;
позиция: абсолютная;
верх: -9 пикселей;
слева: -9px;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 20 пикселей;
}
.box: after {
содержание: "";
дисплей: блок;
фон: #fff;
позиция: абсолютная;
верх: -9 пикселей;
вправо: -9 пикселей;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 20 пикселей;
}
.box p {
цвет: #fafafa;
}
. box .boxBtm: before {
содержание: "";
дисплей: блок;
фон: #fff;
позиция: абсолютная;
внизу: -9px;
слева: -9px;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 20 пикселей;
}
.box .boxBtm: after {
содержание: "";
дисплей: блок;
фон: #fff;
позиция: абсолютная;
внизу: -9px;
вправо: -9 пикселей;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 20 пикселей;
} 

Внешний ящик установлен в положение: относительное и переполнение: скрыто.Кроме того, его можно оформить так, как вам нравится. Затем псевдоэлементы (: before,: after) настраиваются на display: block и position: absolute и располагаются в верхнем левом и правом углах.

Поскольку у вас может быть только 1 «набор» псевдоэлементов на один элемент, набор для нижнего угла применяется к внутреннему элементу и позиционируется абсолютно в нижнем левом и правом углах.

Оба набора псевдоэлементов располагаются так, что они вырезают угол, а затем к каждому набору применяется радиус границы. Регулируя расположение и размер псевдоэлементов, можно управлять размером вырезов.

Вот jsfiddle готового примера.

А вот пример jsfiddle с удаленным overflow: hidden и примененным черным фоном, чтобы вы могли ясно видеть, что происходит.

Одним из недостатков этой техники является то, что фон выреза должен совпадать с фоном элемента, на котором находится коробка. Вы можете применить стилистическую границу к элементу или фону, и они также будут вырезаны по углам.

Я не первый, кто придумал такую ​​технику. После того, как я создал вышеупомянутый пост ранее, я немного погуглил и наткнулся на следующую аналогичную технику, опубликованную TutsPlus + в отношении создания «тегов билетов». (Не думал искать билеты CSS3, пока не создал jsfiddle, показанный выше.) И два других метода с использованием градиентов CSS3 от Lea Verou:

Вот и все. Перевернутые закругленные углы или вставка радиуса границы, как вы предпочитаете называть это.Или просто уголки бирки билетов. Несколько разных техник на выбор. Они работают в браузерах, поддерживающих border-radius, или, в случае техники Lea Verou, радиальных градиентов CSS3. С префиксами браузера это расширяет возможности использования в достаточной степени, чтобы сделать его вполне пригодным для использования в «дикой природе», с постепенной деградацией в старых IE до прямоугольников с квадратными углами (как обычно, старый IE выглядит как квадрат).

CSS Border Radius Generator — CSS Portal

Свойство радиуса границы

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

Рис.1 — Пример окружности с граничным радиусом.

Свойство CSS border-radius может содержать от одного до четырех значений, разделенные пробелами. Количество значений определяет способ задания радиусов скругления углов. Если указано более одного значения, скругление углов устанавливается, начиная с левого верхнего угла:

1 Значение:

Пример: div { border-radius: 10px; }
Первое значение — Устанавливает радиус для всех углов блока.


2 Значения:

Пример: div { border-radius: 10px 20px; }
Первое значение — Устанавливает радиус для верхнего левого и нижнего правого углов блока.
Второе значение — Устанавливает радиус для верхнего правого и нижнего левого углов блока.


3 Значения:

Пример: div { border-radius: 10px 20px 5px; }
Первое значение — Устанавливает радиус закругления верхнего левого угла блока.
Второе значение — одновременно задает радиус для верхнего правого и нижнего левого углов блока.
Третье значение — задает радиус правого нижнего угла блока.


4 Значения:

Пример: div { border-radius: 10px 20px 5px 40px; }
Первое значение — Устанавливает радиус верхнего левого угла блока.
Второе значение — Устанавливает радиус верхнего правого угла блока.
Третье значение — задает радиус правого нижнего угла блока.
Четвертое значение — Устанавливает радиус нижнего левого угла блока.

В дополнение к свойству border-radius вы также можете установить радиус каждого угла блока отдельно, используя следующие свойства CSS:

Свойство border-radius также позволяет закруглять углы как овальную дугу, а не круг:

Инжир.2 — Пример эллипса с граничным радиусом.

Для определения овала используется комбинация двух значений, разделенных символом /:

  радиус границы: 20 пикселей / 35 пикселей;  

Значение слева от косой черты определяет горизонтальный радиус, а значение справа определяет вертикальный радиус.

Каждая из двух частей (до и после косой черты) следует тем же правилам, что и при создании круглый радиус. Это означает, что каждая часть может содержать от одного до четырех значений, разделенных символом пробелы.И количество указанных значений будет определять, как устанавливаются угловые радиусы. За Например, четыре значения перед символом / представляют горизонтальные радиусы левого верхнего угла, верхний правый, нижний правый и нижний левый углы. Значения после символа / соответственно представляют вертикальные радиусы для тех же углов.

Пример: div { border-radius: 25px / 10px; }
Первое значение — Устанавливает радиус горизонтального радиуса каждого угла блока.
Второе значение — Устанавливает радиус вертикального радиуса каждого угла блока.


Использованные ссылки на CSS

Закругленные углы

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

Закругленные границы CSS — одна из самых полезных новых функций, представленных в CSS 3. Здесь мы рассмотрим, как можно создать закругленные углы, чтобы выделить текстовый абзац для выделения акцента.

Чтобы создать закругленные углы с помощью CSS, вам необходимо использовать свойство border-radius. Это свойство можно объявить с помощью сокращенного объявления border-radius, которое позволяет объявлять все значения в одном свойстве, или вы можете объявить каждый угол по отдельности. Здесь мы собираемся использовать сокращенное свойство. На данный момент свойства CSS 3 все еще, так сказать, в стадии разработки, и поэтому их необходимо объявить с использованием соответствующих префиксов поставщика.

В спешке?

Для тех из вас, кто просто заглянул, чтобы быстро просмотреть фрагмент, закругленные углы могут быть добавлены с помощью всего нескольких строк кода CSS.Следующий код создаст абзац светло-серого цвета с радиусом 10 пикселей в каждом углу:

CSS

 .grayparagraph {
фон: # f1f1f1;
отступ: 10 пикселей;
-moz-border-radius: 10 пикселей;
-webkit-border-radius: 10 пикселей;
-o-border-radius: 10 пикселей;
-ms-border-radius: 10 пикселей;
радиус границы: 10 пикселей;
} 

и в вашем HTML

 

Текст вашего абзаца

Результат:

Кто-то, должно быть, лгал о Йозефе К. , он знал, что не сделал ничего плохого, но однажды утром его арестовали. Каждый день в восемь утра ему приносил завтрак повар миссис Грубач — миссис Грубач была его хозяйкой, — но сегодня она не пришла. Такого никогда раньше не было. К. подождал немного, посмотрел со своей подушки на старуху, которая жила напротив и наблюдала за ним с необычным для нее любопытством, и, наконец, голодный и смущенный, позвонил в звонок.

Скриншот для не поддерживающих браузеров:

Если вы остались немного дольше: больше закругленных углов CSS

При создании закругленных границ важно отметить, что, если вы не хотите, чтобы контент «выходил» из областей закругленных углов, вам нужно добавить правильное количество отступов, давайте рассмотрим пример:

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

.beigeparagraph_1 {
фон: # DFDAD5;
-moz-border-radius: 35 пикселей;
-webkit-border-radius: 35 пикселей;
-o-border-radius: 35 пикселей;
-ms-border-radius: 35 пикселей;
радиус границы: 35 пикселей;
} 
 

Кто-то, должно быть, лгал о Йозефе К. , он знал, что не сделал ничего плохого, но однажды утром его арестовали. Каждый день в восемь утра ему приносил завтрак повар миссис Грубач — миссис Грубач была его хозяйкой, — но сегодня она не пришла.Такого никогда раньше не было. К. подождал немного, посмотрел со своей подушки на старуху, которая жила напротив и наблюдала за ним с необычным для нее любопытством, и, наконец, голодный и смущенный, позвонил в звонок.

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

 .beigeparagraph_2 {
фон: # DFDAD5;
отступ: 35 пикселей;
-moz-border-radius: 35 пикселей;
-webkit-border-radius: 35 пикселей;
-o-border-radius: 35 пикселей;
-ms-border-radius: 35 пикселей;
радиус границы: 35 пикселей;
} 

 

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

Кто-то, должно быть, лгал о Йозефе К. , он знал, что не сделал ничего плохого, но однажды утром его арестовали. Каждый день в восемь утра ему приносил завтрак повар миссис Грубач — миссис Грубач была его хозяйкой, — но сегодня она не пришла. Такого никогда раньше не было. К. подождал немного, посмотрел со своей подушки на старуху, которая жила напротив и наблюдала за ним с необычным для нее любопытством, и, наконец, голодный и смущенный, позвонил в звонок.

Добавление акцента к закругленным углам CSS с помощью границы и падающей тени

Если вы хотите добавить границу и тень, чтобы сделать прямоугольник с закругленными углами более выделенным, мы тоже можем это сделать.

Мы можем добавить границу, используя сокращенное свойство CSS border:

 граница: сплошная 1px # C7BEB6; 

И, с помощью CSS 3, тень с использованием сокращенного свойства box-shadow:

 box-shadow: 0 0 5px # 666; 

Значения указаны в следующем порядке: смещение по горизонтали, смещение по вертикали, размытие, цвет.

В приведенном выше примере кода смещения установлены на 0, так что тень действует как тонкое размытие, окружающее прямоугольник. Вместе с префиксами для тени блока и отступом в 5 пикселей окончательный код выглядит так:

.beigeparagraph_3 {
фон: # DFDAD5;
отступ: 35 пикселей;
маржа: 5 пикселей;
граница: сплошная 1px # C7BEB6;
-moz-border-radius: 35 пикселей;
-webkit-border-radius: 35 пикселей;
-o-border-radius: 35 пикселей;
-ms-border-radius: 35 пикселей;
радиус границы: 35 пикселей;
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
-o-box-shadow: 0 0 3px #ccc;
-ms-box-shadow: 0 0 3px #ccc;
тень коробки: 0 0 3px #ccc;
} 

И вот окончательный результат с использованием HTML-кода

 

Кто-то, должно быть, лгал о Йозефе К., он знал, что не сделал ничего плохого, но однажды утром его арестовали. Каждый день в восемь утра ему приносил завтрак повар миссис Грубач — миссис Грубач была его хозяйкой, — но сегодня она не пришла. Такого никогда раньше не было. К. подождал немного, посмотрел со своей подушки на старуху, которая жила напротив и наблюдала за ним с необычным для нее любопытством, и, наконец, голодный и смущенный, позвонил в звонок.

Что не поддерживают браузеры, которые не поддерживают:

скруглений углов с использованием CSS3 | кирупа.com

— пользователем Кирупа | 27 марта 2011 г.

Каждые несколько лет в HTML или его связанных технологий, которые начинаются как крутые и модно. После массового злоупотребления это «что-то» оказывается презирают и издеваются. Этот цикл ухода от лести насмешки повторяются все время. Например, два дополнения, которые люди когда-то любили, но притворяются, что никогда не существовали, мигать и метки выделения. (Признай это — вы знаете, что когда-то их использовали! )

В CSS3 недавно добавилась возможность указать закругленные углы.Я не говорю, что округлый углы будут чрезмерно использованы, что приведет к аналогичному люфту как и многие до этого, но это, безусловно, очень круто и модно сегодня! Вот тут-то и пригодится этот урок. Этот урок научит вас быть крутым и модным. объясняя почти все, что нужно знать об использовании CSS для определения закругленных углов ваших элементов.

Что такое закругленные углы?

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

[без округления ]

Если посмотреть на углы, то он очень острый. Это можно с уверенностью сказать, что этот прямоугольник не имеет закругленных углы. Это отличается от следующего прямоугольника:

[округление]

У этого прямоугольника определенно закругленные углы, но, говоря что у него «закругленные углы» все еще немного неточно из техническая точка зрения. Как мы можем определить округлость этого прямоугольника? Чтобы понять это, давайте увеличьте немного больше и внимательно посмотрите, что это закругленное Уголок в деталях выглядит:

Скругленность угла определяется радиусом овал, который он создает. В нашем примере радиус 10 пикселей. по горизонтали и вертикали!

Итак … чтобы ответить на наш первоначальный вопрос, закругленный угол тот, который имеет ненулевой радиус. Могло ли это быть ответил более лаконично? Наверное.

Начало работы

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

 




 Закругленные углы! 




Как видите, это очень простой документ, который только содержит div с изображением:

[изображение принцессы создано Дэниел Кук из LostGarden! ]

Если внимательно посмотреть на HTML, у div есть идентификатор mainContent и одноименный селектор CSS существует, чтобы изменить его внешний вид. Стили, которыми вы будете добавление будет жить внутри этого селектора!

Закругленные углы в CSS

В CSS, закругленные углы указываются через border-radius свойство, которое, в простейшем виде принимает значение, определяющее радиус округление:

 радиус границы: 10 пикселей; 

В строке выше я указываю радиус 10 пикселей, наносится на все углы.Следует отметить, что вы не обязательно использовать пиксели. Ты может использовать любую поддерживаемую единицу измерения , такую ​​как em, pt, процент и т.д., чтобы определить округлость вашего угла.

Давайте продолжим и добавим это свойство в наш пример. В Селектор mainContent будет выглядеть следующим образом, когда добавлено свойство border-radius:

 #mainContent {
цвет фона: # EFD6A6;
радиус границы: 10 пикселей;
отступ: 10 пикселей;
выравнивание текста: центр;
} 

После того, как вы добавили это свойство в mainContent, ваш При предварительном просмотре пример будет выглядеть следующим образом:

[ваш углы закруглены на 10 пикселей]

Я только что показал вам, как использовать сокращение версию этого свойства очень просто указать угловой радиус.

Вы можете иметь гораздо больший контроль, если хотите нырнем еще немного. Например, вы можете указать разные угловые радиусы для каждого угла или настроить форму вашего сам уголок! Давайте теперь рассмотрим эти случаи.

Указание радиуса каждого угла Индивидуально

Вы можете указать индивидуальные значения для каждый угол, предоставив четыре значения вашему border-radius стенографическая собственность:

 border-radius: 10px 3px 5px 2px; 

Если вы используете эти значения, наш пример будет выглядеть как следует:

Четыре значения соответствуют в следующем порядке: вверху слева, верхний правый, нижний левый, нижний правый.Для наглядности можно выберите расширение свойства border-radius в его развернутые свойства и укажите радиус для каждого угла базис:

 граница-верх-левый-радиус: 10 пикселей;
граница-верх-правый-радиус: 3px;
граница-нижний-левый-радиус: 5 пикселей;
граница-нижний-правый-радиус: 2px; 

Результат использования расширенных свойств тот же как сокращение, так что используйте ту форму, которая вам больше подходит удобно с.

Настройка самого угла

Ранее я показал пример того, как используется значение радиуса для определения округлости угла:

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

В CSS это можно сделать, сначала осознав, что то, что вы указали ранее в качестве радиуса границы, соответствует к горизонтальному радиусу. Чтобы указать вертикальный радиус, при использовании сокращенного свойства border-radius вы добавляете косая черта (/) и эквивалентные вертикальные компоненты напрямую после горизонтального объявления:

 border-radius: 10px 3px 5px 2px / 20px 1px 2px 1px; 

Когда вы используете расширенные свойства border-radius, вертикальный радиус указывается сразу после горизонтального один:

 граница-верх-левый-радиус: 10 пикселей 2 пикселя;
граница-верх-правый-радиус: 3px 1px;
граница-нижний-левый-радиус: 5px 2px;
граница-нижний-правый-радиус: 2px 3px; 

Вот и все, что нужно для настройки округлости угол!

Другие способы представления округлых Углы

В предыдущих разделах я рассмотрел сокращенные и расширенные варианты указания border-radius свойство. В этом разделе давайте посмотрим на некоторые другие (допустимые) способы просмотра того же CSS.

Начнем с этого:

 border-radius: 10px 2px; 

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

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

 border-radius: 10px 3px 5px 2px / 20px 1px; 

В этом примере вертикальный радиус левого верхнего и нижний правый угол составляет 20 пикселей.Вертикальный радиус нижний левый и верхний правый углы — 1 пиксель.

Последнее, что мы собираемся рассмотреть, это то, что происходит при указании трех значений:

 border-radius: 10px 2px 20px; 

В этом случае ваш браузер обработает недостающую четвертую значение как такое же, как и второе значение! Верхний левый соответствует первому значению, верхний правый угол соответствует второе значение, нижний левый угол соответствует третьему значению, а внизу справа соответствует второе значение. В этом есть смысл, правда?

Заключение

Вот и все нужно узнать о закругленных углах в CSS. Вы можете используйте свойство border-radius для закругления углов почти все элементы. Я упоминаю «почти», потому что, согласно для W3C, это не работает с таблицами, чьи border-collapse настроен на свертывание.

Есть вопрос или просто хотите поболтать? Прокомментируйте ниже или загляните на наши форумы (на самом деле это одно и то же!), Где самые дружелюбные люди, с которыми вы когда-либо столкнетесь, будут рады помочь вам!

Когда Кирупа не занят тем, что пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.

Hit Подпишитесь, чтобы получать полезные советы, уловки, селфи и многое другое, лично доставленное на ваш почтовый ящик.

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *