Css радиус: Свойство border-radius | CSS справочник

Leave a Comment / Css / By /

CSS :: Свойство border-radius

Сокращенное css-свойство border-radius (от англ. border radius – радиус границы) используется для скругления углов границ элемента в одном объявлении, позволяя задавать скругление как отдельных, так и сразу всех границ элемента. При этом border-radius срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента.

Характеристики

  • Значение по умолчанию: 0.
  • Применяется: ко всем элементам, за исключением таблиц с border-collapse: collapse.
  • Наследуется: нет.
  • Анимируется: да.
  • JavaScript: object.style.borderRadius=»value».

Синтаксис

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

Значения

Любые доступные в CSS единицы измерения (смотреть), а также проценты, отсчет которых производится относительно ширины блока.

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

  • одно значение – скругление задается для всех четырех сторон элемента;
  • два значения – первое значение задает скругление верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает скругление верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – скругление границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.

Если подразумевается сгругление границ по эллипсу, свойству следует передавать через слеш / сразу два радиуса.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-radius

Примеры

HTML Результат htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Четыре значения для скругления по окружности */
		.border_1{
		border-radius: 5px 1em 30% 50px;
		}
				
		/* Три значения для скругления по окружности */
		.border_2{
		border-radius: 5px 1em 30%;		
		}
		
		/* Два значения для скругления по окружности */
		.border_3{
		border-radius: 5px 1em;		
		}
		
		/* Одно значение для скругления по окружности */
		. border_4{
		border-radius: 5px;		
		}
		
	</style>
	
</head>
<body>
	<p>
		Четыре значения для скругления по окружности<br>
		border-radius: 5px 1em 30% 50px;
	</p>
	
	<p>
		Три значения для скругления по окружности<br>
		border-radius: 5px 1em 30%;
	</p>
	
	<p>
		Два значения для скругления по окружности<br>
		border-radius: 5px 1em;
	</p>
	
	<p>
		Одно значение для скругления по окружности<br>
		border-radius: 5px;
	</p>
		
</body>
</html>

Пример №1

HTML Результат htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<meta name="robots" content="noindex">
	<title>Пример №2</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
						
		/* Два значения для скругления по эллипсу */
		.border_1{
		border-radius: 10px 20px / 20px 40px;		
		}
		
		/* Одно значение для скругления по эллипсу */
		.
  border_2{
		border-radius: 20px / 40px;		
		}
		
	</style>
	
</head>
<body>
		
	<p>
		Два значения для скругления по эллипсу<br>
		border-radius: 10px 20px / 20px 40px;
	</p>
	
	<p>
		Одно значение для скругления по эллипсу<br>
		border-radius: 20px / 40px;	
	</p>
		
</body>
</html>

Пример №2

html — Баг при применении css стиля border-radius

Вопрос задан

Изменён 1 год 2 месяца назад

Просмотрен 406 раз

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

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

#circle-1 {
  background: url() center center no-repeat;
  background-size: 75%;
  height: 5em;
    width: 5em;
    margin-right: 0.5em;
    border-radius: 50%;
  border: 0.1em solid white;
}
html {background-color: yellow}
<img></img>
  • html
  • css
  • google-chrome

Если вы хотите вставить картинку в блок как background, то используйте div, а не img и не будет никаких артефактов. Если все же нужен img, то лучше картинку вставлять как src.

Добавил примеры.

.circle {
  height: 5em;
  width: 5em;
  margin-right: 0.5em;
  border-radius: 50%;
  border: 0.1em solid black;
}
.image {
  background: url("https://via.placeholder.com/150/000000") center center no-repeat;
  background-size: cover;
}
<ul>
  <li>
    <h4>img круглый с фоном</h4>
    <img>
  </li>
  <li>
    <h4>img круглый с src</h4>
    <img src="https://via. placeholder.com/150/000000">
  </li>
  <li>
    <h4>div круглый с фоном</h4>
    <div></div>
  </li>
</ul>

1

Спрятать некорректно выпирающие пиксели можно таким образом:
(1) Под дополнительный псевдоэлемент

#circle-1::after {
  content: '';  
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  display: block;
  border: solid 2px #FFF; // цвет бэкграунда
  border-radius: 50%;
  z-index: 3;
}

(2) Имитировать круг изображением
Для div можно имитировать обводку с помощью

::after в котором разместить background-image пустого круга (для контента), а снаружи будет фоновый цвет (имитация округления). Но при этом без использования border-radius: 50% / overflow: hidden;

Выглядит вот так: ibb.co/0s75WFc

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS { В реальной жизни }

Признание: я почти никогда не пишу border-radius как стенографию, в основном потому, что никогда не помню порядок. Мой мозг запоминает сокращенные обозначения полей и отступов (верхний, правый, нижний, левый), но когда дело доходит до углов, все обстоит иначе. Начать с верхнего левого угла или с верхнего правого? Поэтому я обычно прибегаю к сокращению, которое, по общему признанию, многословно, но, по крайней мере, имеет то преимущество, что является явным для меня и любых будущих читателей моего кода. Для справки, они эквивалентны:

 div { 
 радиус границы: 10% 20% 30% 75%; 
 } 
 div { 
 граница-верхний-левый-радиус: 10%; 
 граница-верхний-правый-радиус: 20%; 
 граница-нижний-правый-радиус: 30%; 
 граница-нижний-левый-радиус: 75%; 
 }

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

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

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

Неравные радиусы

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

 div { 
 border-top-left-radius: 100% 5rem; 
 }

Первое значение — это радиус в горизонтальном направлении, второе — в вертикальном направлении.

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

 div { 
 радиус границы: 2rem 8rem 8rem 9rem / 3rem 11rem 6rem 5rem; 
 }

По сути, мы делаем два обхода вокруг нашего элемента по часовой стрелке.

Нам не нужно задавать каждый радиус в сокращении. Сокращение в этом примере эквивалентно установке всех вертикальных радиусов на 50%, при этом горизонтальные радиусы попеременно устанавливаются на 5rem и 2rem соответственно.

 /* Shortand */ 
 div { 
 border-radius: 5rem 2rem / 50%; 
 } 
 /* Эквивалент: */ 
 div { 
 border-top-left-radius: 5rem 50%; 
 border-top-right-radius: 2rem 50%; 
 граница-нижний-правый-радиус: 5rem 50%; 
 граница-нижний-левый-радиус: 2rem 50%; 
 }

Логические свойства для радиуса границы

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

.

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

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

 div { 
 граница-верхний-левый-радиус: 5rem; 
 граница-верхний-правый-радиус: 2rem; 
 граница-нижний-правый-радиус: 4rem; 
  граница-нижний-левый-радиус: 3rem; 
 } 
 /* С логическими свойствами: */ 
 div { 
 border-start-start-radius: 5rem; 
 граница-начало-конец-радиус: 2rem; 
 граница-конец-конец-радиус: 4rem; 
 граница-конец-начало-радиус: 3rem; 
 }

Привыкнуть к написанию border-start-start-radius — это, конечно, своего рода скачок в уме! Написано так, потому что это начало блочной оси и начало встроенной оси, а border-start-end-radius относится к началу оси блока и концу встроенной оси и так далее.

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

См. перо Логический радиус границы от Мишель Баркер (@michellebarker) на КодПене.

Логические свойства и неравные радиусы

Несколько сбивает с толку, хотя имя свойства относится к оси блока, а затем к встроенной оси, значение радиуса записывается сначала как встроенная ось, а затем ось блока. Это делает его совместимым с порядком физических свойств (например, border-top-right-radius и border-start-end-radius будут относиться к одному и тому же углу, и порядок значений будет таким же), но все еще может быть запутанным! Я полагаю, что мы могли бы думать об этом, поскольку край блока — это тот, который обрабатывается округлением в первую очередь, несмотря на то, что он относится к горизонтальному радиусу.

Режимы вертикального письма

Вот интересная особенность: в режиме вертикального письма свойства логического радиуса границы ведут себя не совсем так, как я ожидал бы при использовании эллиптического радиуса границы (т. е. более одного значения). В этой демонстрации я применяю режим записи vertical-rl ко второму элементу.

 .wrapper { 
 режим письма: вертикальный-rl; 
 } 
 p { 
 граница-начало-начало-радиус: 10 бэр 1 бэр; 
 border-start-end-radius: 2rem 3rem; 
 граница-конец-конец-радиус: 8rem 4rem; 
 } 
 
 .wrapper:nth-child(2) { 
 режим записи: horizontal-tb; 
 }

См. перо Логический радиус границы от Мишель Баркер (@michellebarker) на КодПене.

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

 .wrapper:nth-child(2) p { 
 /* Мы должны поменять местами значения, если хотим, чтобы они были логичными :( */ 
 border-start-start-radius: 1rem 10rem; 
 border-start- end-radius: 3rem 2rem;
 border-end-end-radius: 4rem 8rem;
 }

Я не уверен, то ли я что-то недопонимаю в спецификации, то ли это баг (то что работает то же самое в Chrome и Firefox предполагает обратное), но мне это кажется нелогичным

Нет логического сокращения

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

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

Справочник

Ознакомьтесь с альманахом CSS Tricks для получения полезного руководства по всем вопросам border-radius .

Свойство CSS Border-Radius — 1Keydata CSS Tutorial

CSS Tutorial  >  Border   >   Background-radius

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

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

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

  • Одно значение: радиус применяется ко всем четырем углам.
  • Два значения: первый радиус применяется к верхнему левому и нижнему правому углам, а второй радиус применяется к верхнему правому и нижнему левому углам.
  • Три значения: первый радиус применяется к верхнему левому углу, второй радиус применяется к верхнему правому и нижнему левому углам, а третий радиус применяется к нижнему правому углу.
  • Четыре значения: значения перечислены в следующем порядке: вверху слева, вверху справа, внизу справа и внизу слева.

В дополнение к приведенному выше соглашению также можно установить радиус границы для определенного угла. Они выполняются с помощью следующих четырех свойств CSS:

  • граница-верхний-левый-радиус
  • граница-верхний-правый-радиус
  • граница-нижний-левый-радиус
  • граница-нижний-правый-радиус

Для каждого угла можно определить одно или два значения. Когда используется только одно значение, «закругленный угол» выглядит как круг. Другими словами, направления x и y имеют одинаковый радиус. Когда используются два значения, закругленный угол выглядит как эллипс (см. пример 5 ниже).

Пример 1: укажите одно значение

Декларация CSS

радиус границы: 30px;

, что приводит к следующему:

В примере 1 все четыре угла скруглены с радиусом 30 пикселей.

Пример 2: укажите два значения

Декларация CSS

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

, что приводит к следующему:

В примере 2 верхний левый и нижний правый углы имеют радиус 30 пикселей, а верхний правый и нижний левый углы имеют радиус 50 пикселей.

Пример 3: Использование процентов

Декларация CSS

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

, что приводит к следующему:

В примере 3 радиус составляет 50% элемента. Поскольку элемент представляет собой квадрат, результатом применения 90 166 border-radius 90 167 является круг. Если элемент представляет собой прямоугольник, результатом будет эллипс.

Пример 4: указать каждый угол отдельно

Декларация CSS

граница-верхний-правый-радиус: 60px;
граница-верхний-левый-радиус: 40px;
граница-нижний-левый-радиус: 80px;

, что приводит к следующему:

В примере 4 радиус указан для правого верхнего, левого верхнего и левого нижнего углов. Для нижнего правого угла ничего не указано, поэтому он отображается как прямой угол.

Пример 5: Набор эллиптических углов

Декларация CSS

радиус границы: 20px/60px;

, что приводит к следующему:

В примере 5 все четыре угла настроены как эллиптические углы, и все они имеют одинаковое значение: 20 пикселей для радиуса по оси X и 60 пикселей для радиуса по оси Y.

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

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