Закругление углов css: border-radius | htmlbook.ru

Содержание

border-radius | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
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

Описание

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

Синтаксис

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: лучшее скругление углов

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

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

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

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

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

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

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

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

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

.mike {

border-radius: 12px;

border: 6px solid crimson;

}

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

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

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

.mike {

border-radius: 12px;

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;
}

.mike {

border-radius: 26px;

border: 14px solid crimson;

}

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

Метод Box-shadow

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

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

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

.mike {

border-radius: 12px;

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;
}

$border-width: 14px;

$radius: $border-width*1.9;

.mike {

border: $border-width solid crimson;

border-radius: $radius;

}

Заключение

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

Автор: Guil Hernandez

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

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

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

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

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как закруглить углы изображения на CSS без Фотошопа — Блокнот IT инженера

Все современные браузеры поддерживают стандарты гипертекстовой разметки 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 по обработки изображений и показать как это просто.

Закруглённые углы (свойство 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;

1	2	3
1.1	2.1	3.1
1.2	2.2	3.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 | Impuls-Web.ru

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

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

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

Простое скругление углов CSS

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

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

.radius-block{

border-radius: 25px;

}

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

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

Варианты скругления углов CSS

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

.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-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

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

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

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

Закругленные углы и блоки с тенью

На создание этой страницы вдохновила работа Арве
Берсвендсена (Arve Bersvendsen). У него есть много других интересных демонстраций CSS.

В CSS3 есть свойства для создания закругленных границ, границ,
состоящих из изображений и блоков с тенями. Но немного
потрудившись, вы сможете их частично смоделировать, начиная уже с
версии CSS2 — причём без таблиц и дополнительной разметки.

Конечно, закругленные границы и тени гораздо легче сделать при
помощи CSS3, чем в CSS2. Например, чтобы задать абзацу тонкую
красную рамку с закругленными углами, в CSS3 вам достаточно всего
двух строк наподобие этих:

P { border: solid thick red;
    border-radius: 1em }

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

P { box-shadow: black 0.5em 0.5em 0.3em }

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

Результат

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

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

Исходный код HTML не содержит ничего лишнего:

<blockquote>
<p>Видите бледный зеленый блок с
закругленными углами и тенью на белом фоне?
Если нет, значит, ваш браузер некорректно
справляется с генерированием контента (или не
справляется вовсе).
</blockquote>

Навигация по сайту

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

Одинаковый радиус для всех углов

Для того чтобы установить одинаковый радиус для всех углов блока нужно указать одно значение:

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


-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Префикс -moz записывается для отображения в браузере Firefox,

а –webkit, для Safari и Google Chrome.


HTML

<div>
  &nbsp;
</div>


CSS

.box{
    width: 150px;
    height: 150px;	
    border: 3px solid #444;
    background-color: #fC0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Одинаковые радиусы по диагонали

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


-webkit-border-radius: 40px  20px;
-moz-border-radius: 40px  20px;
border-radius: 40px  20px;

1. Верхний левый и нижний правый – 40px

2. Верхний правый и нижний левый – 20px


HTML

<div>
  &nbsp;
</div>


CSS

.box{
    width: 150px;
    height: 150px;
    border: 3px solid #444;	
    background-color: #fC0;
    -webkit-border-radius: 40px 20px;
    -moz-border-radius: 40px 20px;
    border-radius: 40px 20px;
}

Два равных радиуса по диагонали и два по отдельности

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


-webkit-border-radius: 10px 40px 20px;
-moz-border-radius: 10px 40px 20px;  
border-radius:  10px 40px 20px;

1. Верхний левый – 10px

2. Верхний правый и нижний левый – 40px

3. Нижний-правый – 20px

Каждый радиус задаётся в отдельности

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


-webkit-border-radius: 0px 10px 20px 40px;
-moz-border-radius: 0px 10px 20px 40px;
border-radius:  0px 10px 20px 40px;

1. Верхний левый – 0px

2. Верхний правый – 10px

3. Нижний правый – 20px

4. Нижний левый – 40px

Закругления блока с левой стороны


-webkit-border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
border-radius: 20px 0px 0px 20px;

Закругления блока с правой стороны


-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;

Закругления сверху


-webkit-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
border-radius:  0px 20px 20px 0px;

Закругления снизу


-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius:  0px 0px 20px 20px;

Круг из квадратного блока

Для того чтобы получился круг из квадратного блока ( это относится и к изображению ) нужно чтобы высота и ширина были одинаковы а значение свойства border-radius должно быть пятьдесят процентов.


HTML

<div>
  &nbsp;
</div>


CSS

.circle{
    width: 150px;
    height: 150px;
    border: 3px solid #444;
    background-color: #fC0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

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

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


HTML

<div>
  &nbsp;
</div>


CSS

.rounding{
    width: 200px;
    height: 100px;	
    background-color: #fC0;
    border: 3px solid #444;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;  
}

закругленных углов | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на каждый угол, наложенных на несколько вложенных элементов div . Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы.Свойство border-radius можно использовать для добавления угла к каждому углу блока.

 
#maryn {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}

Вот и все. Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).

Углы вырезаются вокруг соответствующих четвертей круга (или эллипса) с заданным радиусом.

Конечно, если вам нужна граница …

 
#ok_a_border_then {
    граница: 5px solid # 8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5 пикселей; 
}

Woop.

Ссылка на нас!
Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

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

 
#monroe {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      border-radius: 6px 12px 18px 24px; 
}

Граничный радиус с несколькими значениями.

Фигуристая.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый на первую длину (или процент) и верхний правый + нижний левый на второй. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.

Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на похожие проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги кажутся вам слишком квадратными? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».

 
#nanoo {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50 пикселей / 100 пикселей; 
        граница-нижний-левый-радиус: 50 пикселей;
        граница-нижний-правый-радиус: 50 пикселей;
}

Наноо.

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

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

Найди свой матч на учебном лагере

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

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

 index.html


 Это коробка.

 styles.css

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

.Это поле содержит тег
, в котором текст Это поле . хранится. Нашему тегу
назначен класс box , что означает, что стили CSS, которые мы применяем к классу box , будут применены к тегу
.
В нашем файле CSS мы определили, что любой элемент с классом box должен иметь:
Сплошная голубая рамка шириной 3 пикселя.
Верхний левый угол, округленный на 20 пикселей.
Нижний правый угол, округленный на 10 пикселей.
Если вы посмотрите на изображение выше, вы увидите, что наши верхний левый и нижний правый углы скруглены. Левый верхний угол был закруглен на 20 пикселей, а правый нижний угол — на 10 пикселей.
Сокращение радиуса границы CSS
Свойство border-radius является сокращением для четырех подсвойств, которые мы обсуждали ранее.
Используя свойство border-radius, мы можем определить закругленные углы для веб-элемента, используя одну строку кода, вместо того, чтобы определять каждый угол по отдельности с использованием отдельного свойства.
Синтаксис свойства border-radius зависит от того, сколько значений вы укажете. Давайте рассмотрим пример каждого из возможных способов использования свойства border-radius для добавления закругленных углов к элементу.
Одно значение
Если вы хотите применить одинаковый радиус границы к каждому углу элемента, вам нужно указать только одно значение при использовании свойства border-radius.
Предположим, вы хотите создать рамку с радиусом границы 20 пикселей по всем углам.Вы можете сделать это с помощью этого кода:
.box { радиус границы: 20 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
В этом примере мы создали поле высотой 200 пикселей и шириной 200 пикселей. Наш блок имеет сплошную светло-синюю рамку размером 3 пикселя. Мы также использовали свойство border-radius, чтобы добавить эффект округления на 20 пикселей к каждому углу в нашем блоке.
Два значения
Если вы создаете прямоугольник, который должен иметь одинаковое закругление для верхнего левого и нижнего правого углов и другой набор скруглений для верхнего правого и нижнего левого углов, вы можете указать два значения с помощью свойства border-radius.
Порядок, в котором применяются указанные вами значения округления:
Первое значение — это величина, на которую вы хотите, чтобы верхний левый и нижний правый углы были скруглены.
Второе значение — это величина, на которую вы хотите, чтобы верхний правый и нижний левый углы были округлены.
Предположим, вы хотите, чтобы верхний левый и нижний правый углы блока были закруглены на 20 пикселей, а нижний левый и верхний правый углы — на 10 пикселей.Вы можете создать этот ящик, используя следующий код:
.box { радиус границы: 20 пикселей 10 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
В нашем примере мы указали два значения с помощью свойства border-radius. Первое значение используется для установки закругления края для верхнего левого и нижнего правого углов на 20 пикселей. Второе значение используется для установки закругления углов для левого нижнего и правого верхнего углов на 10 пикселей.
Три значения
Если вы хотите назначить прямоугольник с закругленными углами, где верхний левый угол имеет собственное закругление, верхний правый и нижний левый углы имеют собственное закругление, а нижний правый угол имеет собственное закругление, вы можете указать три значения с рамкой -радиус свойство.
Порядок, в котором указанные вами три значения применяются к блоку, следующий:
Первое значение — это округление левого верхнего угла.
Второе значение — это скругление для верхнего правого и нижнего левого углов.
Третье значение — это округление правого нижнего угла.
Предположим, мы создаем прямоугольник, который должен иметь следующие округления:
Верхний левый угол должен быть скруглен на 30 пикселей.
Правый верхний и левый нижний углы должны быть скруглены на 20 пикселей.
Нижний правый угол должен быть скруглен на 10 пикселей.
В приведенном ниже примере мы создаем прямоугольник, который использует эти скругления углов. Мы также применяем светло-синюю рамку вокруг нашего блока и устанавливаем его размер 200 пикселей в ширину и 200 пикселей в длину.Вот код, который мы могли бы использовать для создания нашего бокса:
.box { радиус границы: 30 пикселей 20 пикселей 10 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
Верхний правый и нижний левый углы имеют одинаковое закругление. Верхний левый угол имеет собственное закругление, а нижний правый угол также имеет собственное закругление.
Четыре значения
Допустим, вы создаете прямоугольник, углы которого должны быть скруглены с использованием четырех разных значений.Вы можете скруглить углы рамки, указав четыре значения с помощью свойства border-radius. Указанные вами значения будут интерпретироваться в следующем порядке:
Первое значение относится к левому верхнему углу.
Второе значение относится к правому верхнему углу.
Третье значение относится к нижнему правому углу.
Четвертое значение применяется к нижнему левому углу.
Предположим, мы хотим создать прямоугольник с закруглением на 5 пикселей в верхнем левом углу, закруглением на 10 пикселей в правом верхнем углу, закруглением на 15 пикселей в правом нижнем углу и закруглением на 20 пикселей в нижнем левом углу.Наше поле должно быть 200 пикселей в ширину на 200 пикселей в длину и иметь сплошную голубую границу шириной 3 пикселя.
Мы могли бы создать этот ящик, используя следующий код:
.box { радиус границы: 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 для создания закругленных углов, как эксперт.
Как сделать скругленный угол с помощью CSS?
Чтобы создать закругленный угол, мы используем свойство CSS border-radius . Это свойство используется для установки радиуса границы элемента.
Синтаксис:
/ * Устанавливает значение радиуса для всех 4 углов * / граница-радиус: значение;
Пример 1: В этом примере описывается радиус границы для закругления углов.
HTML
02
закругленный Пример 2: В этом примере описывается использование свойства border-bottom-left-radius для создания скругленного угла в нижнем левом углу.
HTML

< html lang = «en» >
< мета кодировка = "UTF-8" >
<
000 000 = = -UA-Compatible " content = " IE = edge >
< meta name = "viewport content" 000 000
"ширина = ширина устройства, начальный масштаб = 1.0 " >

< style >
.container {
000px ширина сплошная черная : 300px;
height: 200px;
background-color: aqua;
/ * Этот радиус установлен для всех 4 углов * /
border 9-000 радиус: 10 пикселей;
}
стиль >
головка > >
<900 06 h3 style = "цвет: зеленый" > GeeksforGeeks h3 >
< div class class class class class class >
< p text-align = «center» > Закругленный угол p >
>
корпус >

html >

< html lang = «en» >
< мета кодировка = "UTF-8" >
< 9000 000 мета = -UA-Compatible « content = » IE = edge >
< meta name = «viewport content» 000 = "ширина = ширина устройства, начальный масштаб = 1.0 " >

< style >
.container {
000px ширина сплошная черная : 300px;
height: 200px;
background-color: aqua;
border-bottom-left-radius: 30px;

стиль >
головка >

< 000 > GeeksforGeeks h3 90 006 >
< div class = "контейнер" >
< p center text >
Это закругленный угол на < b > внизу слева b >
p div >
корпус >

html > 0003 0003 > 905
Пример 3: В этом примере описывается использование свойства border-top-right-radius для создания скругленного угла в правом верхнем углу c Орнер.
HTML

Пример 4: В этом примере описывается использование свойства border-bottom-right-radius для создания скругленного угла в нижнем правом углу. т.
HTML

< html lang = «en» >
< мета кодировка = "UTF-8" >
< 9000 000 мета = -UA-Compatible « content = » IE = edge >
< meta name = «viewport content» 000 = "ширина = ширина устройства, начальный масштаб = 1.0 " >

< style >
.container {
000px ширина сплошная черная : 300px;
height: 200px;
background-color: aqua;
border-top-right-radius: 30px;

стиль >
головка >

< 000 > GeeksforGeeks h3 >
< div class = "контейнер" >
< p text-align >
Это закругленный угол на < b > вверху справа b >
p > > > div >
корпус >

html >

< html lang = «en» >
< мета кодировка = "UTF-8" >
< 9000 000 мета = -UA-Compatible « content = » IE = edge >
< meta name = «viewport content» 000 = "ширина = ширина устройства, начальный масштаб = 1.0 " >

< style >
.container {
000px ширина сплошная черная : 300px;
height: 200px;
background-color: aqua;
border-bottom-right-radius: 30px;

стиль >
головка >

< корпус 000 > 000 > GeeksforGeeks h3 9 0006 >
< div class = «контейнер» >
< p center text >
Это закругленный угол на < b > внизу справа b >
p div >
корпус >

html 000: 000 03 000 905
Пример 5: В этом примере описывается использование свойства border-top-left-radius для создания угла в верхний левый.
HTML
0
слева
Сокращения:
Применить значение радиуса ко всем четырем углам:
border-radius: value;
Примените значение 1 к верхнему левому и нижнему правому углам и значение 2 к верхнему правому и нижнему левому углам.
радиус границы: значение1 значение2;
Примените значение 1 к верхнему левому углу, значение 2 к верхнему правому и нижнему левому углам и значение 3 к нижнему правому углу.
радиус границы: значение1 значение2 значение3;
Примените значение 1 к верхнему левому углу, значение 2 к правому верхнему углу, значение 3 к правому нижнему углу и значение 4 к левому нижнему углу.
радиус границы: значение1 значение2 значение3 значение4;
Закругление углов с помощью 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 пикселей; граница-верх-правый-радиус: 3 пикселя; граница-нижний-левый-радиус: 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 Подпишитесь, чтобы получать полезные советы, уловки, селфи и многое другое, лично доставленное вам на почту.
Как создавать блоки с закругленными углами в CSS
До поддержки браузером CSS3 создание блоков с закругленными углами требовало творческого использования
фоновые изображения, границы и расположение. К счастью, эти дни прошли. Сегодня браузеры поддерживают
CSS3 и его свойства border-radius . Свойства border-radius делают
Закруглить углы на коробке несложно.
Начните с HTML-страницы, содержащей два поля.
Закругленные угловые рамки Пример 1 Пример 2
Если вы откроете эту страницу в браузере, она будет выглядеть так:
Свойства border-radius работают путем изгиба угла по окружности
со смещением центра от угла коробки на расстояние, на которое вы
указать.Чтобы создать простой прямоугольник с закругленными углами, добавьте свойство border-radius .
на box1 .
# box1 { фон: # c00; радиус границы: 25 пикселей; }
Свойство border-radius - это сокращенное свойство, которое устанавливает радиус для всех четырех
углы поля равны одному и тому же значению, если дано только одно значение.
Чтобы изменить округлость углов на разные значения, вы можете установить более одного значения с помощью
значения, разделенные пробелами.Первое значение представляет верхний левый угол, второе значение представляет
верхний правый угол, третье значение представляет нижний правый угол, а четвертое значение представляет
нижний левый угол. Добавьте следующий border-radius к box2 .
#box 2 { фон: # ff0; радиус границы: 10 пикселей 140 пикселей 30 пикселей 140 пикселей; }
Откройте HTML-страницу в браузере. Две коробки должны выглядеть так:
Border-radius: создавайте закругленные углы с помощью CSS!
Border-radius: создавайте закругленные углы с помощью CSS!
Свойство CSS3 border-radius позволяет веб-разработчикам легко использовать закругленные углы в своих элементах дизайна без необходимости использования угловых изображений или использования нескольких тегов div, и это, пожалуй, один из наиболее обсуждаемых аспектов CSS3.
С момента первого анонса в 2005 году свойство boder-radius стало пользоваться широкой поддержкой браузеров (хотя и с некоторыми несоответствиями), и, благодаря относительной простоте использования, веб-разработчики быстро извлекли максимальную пользу из этой появляющейся технологии.
Вот простой пример:
Это поле должно иметь закругленные углы для Firefox, Safari / Chrome, Opera и IE9.
Теоретически код для этого примера довольно прост:
# example1 {
border-radius: 15px;
}
Однако на данный момент вам также необходимо использовать префикс -moz- для поддержки Firefox (дополнительные сведения см. В разделе поддержки браузера в этой статье):
# example1 {
-moz-border-radius: 15px;
радиус границы: 15 пикселей;
}
Как это работает
Закругленные углы могут быть созданы независимо, используя четыре отдельных свойства border - * - radius (border-bottom-left-radius, border-top-left-radius и т. Д.) или для всех четырех углов одновременно с использованием сокращенного свойства border-radius.
Сначала мы разберемся с синтаксисом для отдельных свойств border - * - radius перед тем, как посмотрим, как работает сокращенное свойство border-radius.
граница-нижний-левый-радиус, граница-нижний-правый-радиус, граница-верхний-левый-радиус, граница-верх-правый-радиус
Каждое свойство границы - * - radius может принимать одно или два значения, выраженных как длина или процент (проценты относятся к соответствующим размерам рамки).
Синтаксис:
граница - * - * - радиус: [ <длина> | <%> ] [ <длина> | <%> ]?
Примеры:
граница-верх-левый-радиус: 10 пикселей 5 пикселей;
граница-нижний-правый-радиус: 10% 5%;
граница-верх-правый-радиус: 10 пикселей;
Если указаны два значения, они используются для определения по порядку горизонтального и вертикального радиусов четверти эллипса, который, в свою очередь, определяет кривизну угла внешнего края границы.
Если указано только одно значение, оно используется для одинакового определения как горизонтального, так и вертикального радиусов.
На следующей диаграмме показано несколько примеров того, как могут выглядеть углы при разных радиусах:
Если любое из значений равно нулю, угол будет квадратным, а не круглым.
граница-радиус
Сокращенное свойство border-radius может использоваться для одновременного определения всех четырех углов. Свойство принимает один или два набора значений, каждый из которых состоит из одной-четырех длин или процентов.
Синтаксис:
[ <длина> | <процент> ] {1,4} [/ [ <длина> | <процент> ] {1,4}]?
Примеры:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
радиус границы: 5 пикселей;
радиус границы: 5 пикселей 10 пикселей / 10 пикселей;
Первый набор (1–4) значений определяет горизонтальные радиусы для всех четырех углов. Необязательный второй набор значений, которому предшествует «/», определяет вертикальные радиусы для всех четырех углов.Если предоставляется только один набор значений, они используются для одинакового определения как вертикали, так и горизонтали.
Для каждого набора значений применяется следующее:
Если указаны все четыре значения, они представляют собой верхний левый, верхний правый, нижний правый и нижний левый радиусы соответственно. Если нижний левый опущен, это то же самое, что и верхний правый, если нижний правый опущен, это то же самое, что и верхнее левое, и если предоставляется только одно значение, оно используется для установки всех четырех радиусов одинаково.
Поддержка браузера
В настоящее время Opera (версия 10.5 и новее), Safari (версия 5 и новее) и Chrome (версия 5 и новее) поддерживают индивидуальные свойства border - * - radius и сокращенное свойство border-radius, как изначально определено в текущей спецификации W3C (хотя по-прежнему существуют нерешенные ошибки по таким вопросам, как переходы стиля границы, использование процентов для длин и т. д.).
Mozilla Firefox (версия 1.0 и выше) поддерживает border-radius с префиксом -moz-, хотя есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (см. Ниже).
Обновление: Последние ночные версии Firefox поддерживают border-radius без префикса -moz-.
Safari и Chrome (и другие браузеры на основе webkit) поддерживают border-radius с префиксом -webkit-, начиная с версии 3 (больше не требуется, начиная с версии 5), хотя опять же с некоторыми несоответствиями с текущей спецификацией (см. Эту статью для дальнейшего подробности о том, как более старые версии Webkit обрабатывают радиус границы).
Даже Microsoft обещала и продемонстрировала в своем недавнем предварительном выпуске поддержку border-radius начиная с Internet Explorer 9 (без префикса).
Префикс -moz-
Браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz- , начиная с версии 1.0. Однако только начиная с версии 3.5 браузер разрешил эллиптические углы, то есть принимал два значения для каждого угла для независимого определения горизонтального и вертикального радиусов. До версии 3.5 браузер принимал только одно значение для каждого угла, в результате чего углы имели равные горизонтальные и вертикальные радиусы.
Синтаксис из Firefox 3.5 и далее, основная часть соответствует текущей спецификации W3C, как описано в этой статье, с префиксом -moz-. Единственное существенное различие заключается в именовании отдельных свойств границы - * - radius, при этом свойства с префиксом -moz- следуют немного другому соглашению об именах, а именно:

< html lang = «en» >
< мета кодировка = "UTF-8" >
< 9000 000 мета = -UA-Compatible « content = » IE = edge >
< meta name = «viewport content» 000 = "ширина = ширина устройства, начальный масштаб = 1.0 " >

< style >
.container {
000px ширина сплошная черная : 300px;
height: 200px;
background-color: aqua;
border-top-left-radius: 30px;

стиль >
головка >

< корпус 000 > GeeksforGeeks h3 >
< div class = "контейнер" >
< p text-align >
Это закругленный угол на < b > вверху слева b >
p > >
> div >
кузов >

html >
Спецификация W3C Реализация Mozilla
border-radius -moz-граница-радиус
граница-верхний-левый-радиус -moz-border-radius-topleft
граница-верхний-правый-радиус -moz-border-radius-topright
граница-нижний-правый-радиус -moz-border-radius-bottomright
граница-нижний-левый-радиус -moz-border-radius-bottomleft
Реализация Mozilla также немного отличается от спецификации при указании процентов.Вы можете узнать больше о Центре разработчиков Mozilla здесь.
Примеры кроссбраузерности
Вот несколько основных примеров, которые должны работать в текущих версиях Firefox, Safari / Chrome, Opera и даже IE9:
А
В
С
D
E
Ф
#Example_A {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50 пикселей;
граница-нижний-правый-радиус: 50 пикселей;
}
#Example_B {
height: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px 25px;
граница-нижний-правый-радиус: 50 пикселей 25 пикселей;
}
#Example_C {
height: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 25px 50px;
граница-нижний-правый-радиус: 25 пикселей 50 пикселей;
}
#Example_D {
height: 5em;
ширина: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Example_E {
height: 65px;
ширина: 160 пикселей;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
ширина: 70 пикселей;
-moz-border-radius: 35px;
радиус границы: 35 пикселей;
}
Дополнительные примечания и дополнительная литература
Спецификация W3C Backgrounds and Borders подробно описывает, как формируется угол (особенно в обстоятельствах, когда две смежные границы имеют разную ширину), влияние радиуса границы на фоновые изображения, переходы цветов и стилей, что происходит, когда кривые перекрываются. и влияние border-radius на таблицы.
Это лучше всего объясняется в следующих разделах спецификации:
Легкие закругленные углы с радиусом границы
Царство CSS - это царство ящиков. Все на странице - это коробка, внутри коробки, внутри коробки. Неудивительно, что начинающие разработчики CSS (или, в моем случае, плохие графические дизайнеры со слишком большим опытом работы с CSS) так часто создают квадратные макеты!
Однако грядущая спецификация CSS3 дает нам проблеск надежды в виде закругленных углов .Совершенно верно - как только CSS3 будет широко поддерживаться, мы сможем защитить все эти острые края от детей и украсить Интернет в процессе.
И что еще лучше, некоторые браузеры уже поддерживают закругленные углы! Пока я пишу это, вы в значительной степени ограничены Mozilla / Firefox и Safari 3. Однако этот список обязательно будет расти со временем, поэтому не помешает начать экспериментировать с этой функцией. Особенно с учетом того, что в браузерах, которые не поддерживают закругленные углы, ничего плохого не происходит - пользователь видит только правильные квадратные углы.
На данный момент, чтобы заставить код работать, вы застряли в использовании проприетарных тегов CSS: они не проверяются, но просто игнорируются браузерами, которые их не поддерживают. Сам код довольно прост; например, чтобы создать div с красивыми закругленными углами и радиусом 5 пикселей, вы просто напишите что-то вроде этого:
div.ounded { цвет фона: # 666; цвет: #fff; font-weight: жирный; отступ: 10 пикселей; -moz-border-radius: 5 пикселей; -webkit-border-radius: 5 пикселей; }
И это правило создаст div, который выглядит так:
Здесь следует отметить два свойства: «-moz-border-radius» и «-webkit-border-radius.Первый способ заключается в том, как указать радиус - количество пикселей от гипотетической центральной точки до края круга, образованного закругленным углом (см. Изображение ниже) - в браузерах на основе Mozilla. Последний делает то же самое, но для Safari.
Правило не ограничивается только изгибом цветов фона. Если бы вы добавили рамку к элементу, граница также стала бы закругленной. Например, цитата из блока может иметь такой стиль:
blockquote { маржа: 1em 20px; отступ: 10 пикселей; граница: 2px solid # 555; цвет фона: # f2f2f2; цвет: # 555; размер шрифта: 140%; выравнивание текста: выравнивание; -moz-border-radius: 10 пикселей; -webkit-border-radius: 10 пикселей; }
Получение цитаты блока, которая имеет большой стиль, без использования изображений для выполнения задачи:
И, наконец, вы не ограничены ни скругленными углами, ни ни одним из них.Используя это свойство, вы можете указать, какие углы вы хотите скруглить в вашем CSS. Однако важно отметить, что версия этого правила для Firefox немного отличается от стандарта W3C, то есть написана немного иначе, чем правило для Safari. Например, рассмотрим эти два правила, которые используются для закругления верхнего левого угла поля:
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5 пикселей;
По большому счету, это небольшая разница, но очень важная, если вы хотите, чтобы ваши закругленные углы отображались там, где и как должны! Используя возможность закруглять отдельные углы, вы можете создавать необычные предупреждающие сообщения:
.тревога { граница: 2px solid # fc0; отступ: 8px 10px; размер шрифта: 120%; цвет: # c90; font-weight: жирный; цвет фона: # ff9; -moz-border-radius-topleft: 8 пикселей; -webkit-border-top-left-radius: 8 пикселей; -moz-border-radius-bottomright: 8 пикселей; -webkit-border-bottom-right-radius: 8px; }
Или вы можете применить закругленные углы к трем из четырех краев комментария пользователя, что приведет к псевдоречевому пузырю, и все это без единого изображения в поле зрения:

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

Навигация по записям
Previous PostКрасивые пиксельные картинки: Пиксельные рисунки для срисовки (38 фото) 🔥 Прикольные картинки и юмор
Next PostКак в фотошопе поменять цветовой режим: Действия Photoshop: изменение цветового режима
Рубрики
Wordpress
Без рубрики
Верстка
Дизайн
Для начинающих
Обучение
Примеры
Разное
Шаблон
2024 © Все права защищены.

Закругление углов css: border-radius | htmlbook.ru

border-radius | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

Браузеры

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

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

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

Метод Box-shadow

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

Заключение

PSD to HTML

Как закруглить углы изображения на CSS без Фотошопа — Блокнот IT инженера

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

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

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

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

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

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

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

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

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

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

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

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

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

Округление outline

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

HTML овал

HTML круг

HTML цилиндр

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

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

Скругление углов CSS | Impuls-Web.ru

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

Простое скругление углов CSS

Варианты скругления углов CSS

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

Закругленные углы и блоки с тенью

Закругленные углы и блоки с тенью

Результат

Навигация по сайту

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

Одинаковый радиус для всех углов

Одинаковые радиусы по диагонали

Два равных радиуса по диагонали и два по отдельности

Каждый радиус задаётся в отдельности

Закругления блока с левой стороны

Закругления блока с правой стороны

Закругления сверху

Закругления снизу

Круг из квадратного блока

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

закругленных углов | HTML Собака

Радиус границы?

Несколько значений

Эллипсы

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

Радиус границы CSS

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

Пример 1

Пример 2

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