Содержание

свойство 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;
}

Стиль, описанный выше, даст следующий результат на элементе <div> размером 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

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

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

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


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

border-radius — CSS | MDN

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

Это свойство является короткой записью для четырёх свойств border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) иborder-bottom-left-radius (en-US).

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse.

Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.



border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px 5% / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

  • одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
  • одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического скругления.

Значения

<length>
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
<percentage>
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

border-radius: 1em/5em;


border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Формальный синтаксис

  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;

  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

BCD tables only load in the browser

Как закруглить углы изображения на 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



У меня есть этот элемент с добавлением этого стиля:

.checkout-step.current .number {
  background-color: #d26d51;
  outline: 1px solid #d26d51;
  outline-offset: 4px;
}

Но мне не нужны квадратные углы в контуре, мне нужны круглые углы, как в этом примере:

Как я могу это сделать?

html css outline
Поделиться Источник Funny Frontend     30 июня 2015 в 09:40

3 ответа

  • iPhoneOS SDK-удалить закругление углов из представлений (проблема iPad)

    Это может быть немного придирчиво,но в настройке iPad SplitViewController есть 2 вида. Каждый из видов имеет очень маленькое закругление черного угла. (Вероятно, то же самое происходит и с приложениями iPhone). Это округление видно на рисунке ниже. Что я хотел бы сделать, так это удалить черное. ..

  • Изменение вида контура Eclipse для файлов CSS

    Как я могу заставить представление контура Eclipse выполнять любое из следующих действий при отображении контура для файла CSS: отображение комментария создайте сворачиваемый диапазон для группы правил CSS что-нибудь еще? Спасибо CLARIFICATION: Я не говорю о внесении изменений в код eclipse. Я…


4

Мой подход заключается в следующем. Пожалуйста, проверьте JSFiddle . Я добавил следующее HTML.

<a href="#">2</a>

Я добавил следующее css.

a {
  background: #999;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  display: inline-block;
  line-height: 40px;
  position: relative;
  border: 2px solid #000;
  text-align: center;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  border-radius: 30px;
  border: 2px solid #f00;
}

Поделиться Harshal Sawant     30 июня 2015 в 10:03

Поделиться Richard Lindhout     30 июня 2015 в 09:56


-1

**use этот код **
контур мы не можем использовать свойство radius вместо контура make в качестве границы и радиуса, поэтому я изменил код, как это, Попробуйте это .

Html

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

css

    .checkout-step.current .number {
      background-color: #d26d51;
     margin:15px;

      }

.usecode
 {
 border:1px solid #d26d51;
border-radius:25px !important;
 }

Поделиться Raj Rana     30 июня 2015 в 09:56

  • Анимация CALayer из UIView для закругления углов

    Я пытаюсь оживить закругление углов моего зрения. Свойство cornerRadius указано как анимируемое, но я, похоже, не могу заставить его работать. На самом деле я не могу получить ни одно из других свойств для анимации, но углы-это то, что меня интересует. Вот мой код, и он чертовски прост:…

  • css прозрачный сепаратор закругленных углов

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

Похожие вопросы:


Использование контура для границ CSS

кто-нибудь еще использовал контур в CSS для создания двойных границ вместо вложенных divs? Каковы подводные камни использования контура в CSS, потому что я не кажусь очень популярным?? Овации


Удаление Контура Кнопки CSS

Я попробовал этот пример: удаление контура кнопки css, то есть 6.0, 7.0 … добавив outline:none; и border:none; , но это не решает проблему, как вы можете видеть здесь: http://jsfiddle.net/vVNGw /…


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

У меня есть вопрос относительно Jmagick, как я могу закруглить углы изображения, и имеет ли это смысл или лучше сделать это с помощью CSS в HTML ? Спасибо


iPhoneOS SDK-удалить закругление углов из представлений (проблема iPad)

Это может быть немного придирчиво,но в настройке iPad SplitViewController есть 2 вида. Каждый из видов имеет очень маленькое закругление черного угла. (Вероятно, то же самое происходит и с…


Изменение вида контура Eclipse для файлов CSS

Как я могу заставить представление контура Eclipse выполнять любое из следующих действий при отображении контура для файла CSS: отображение комментария создайте сворачиваемый диапазон для группы…


Анимация CALayer из UIView для закругления углов

Я пытаюсь оживить закругление углов моего зрения. Свойство cornerRadius указано как анимируемое, но я, похоже, не могу заставить его работать. На самом деле я не могу получить ни одно из других…


css прозрачный сепаратор закругленных углов

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


CSS ширина контура не работает

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


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

Я играю с пользовательскими представлениями и хочу построить закругленный прямоугольник, используя методы path.lineTo() и path.arcTo() . Итак, прямоугольник, который я хочу получить: Обычно я рисую…


CSS Коробка Теней

Может ли кто-нибудь помочь мне с тем, что я делаю неправильно в коде CSS ниже, я хочу узнать, и я хочу сделать то, что есть на прилагаемом изображении. Инструкции таковы: Стили: ширина: 400 px,…

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

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

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

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

Как закруглить углы в 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, для сайта, основы

border-radius — CSS: Каскадные таблицы стилей

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

Радиус применяется ко всему фону , даже если элемент не имеет границы; точное положение отсечения определяется свойством background-clip .

Свойство border-radius не применяется к элементам таблицы, когда border-collapse равно collapse .

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

Это свойство является сокращением для следующих свойств CSS:

 

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


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


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


радиус границы: 1px 0 3px 4px;



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


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


радиус границы: 10px 5px 2em / 20px 25px 30%;


радиус границы: 10px 5% / 20px 25em 30px 35em;


граница-радиус: наследовать;
радиус границы: начальный;
граница-радиус: вернуться;
граница-радиус: не задано;

Свойство border-radius указано как:

  • одно, два, три или четыре <длина> или <процент> значений. Используется для установки единого радиуса для углов.
  • , за которым необязательно следует «/» и одно, два, три или четыре значения <длина> или <процент> . Это используется для установки дополнительного радиуса, чтобы вы могли иметь эллиптические углы.

Значения

<длина>
Обозначает размер радиуса окружности или большой и малой полуосей эллипса с использованием значений длины. Отрицательные значения недопустимы.
<процент>
Обозначает размер радиуса окружности или большой и малой полуосей эллипса в процентах. Проценты по горизонтальной оси относятся к ширине поля; проценты по вертикальной оси относятся к высоте прямоугольника. Отрицательные значения недопустимы.

Например:

  border-radius: 1em / 5em;


граница-верх-левый-радиус: 1em 5em;
граница-верх-правый-радиус: 1em 5em;
граница-нижний-правый-радиус: 1em 5em;
граница-нижний-левый-радиус: 1em 5em;
  
  border-radius: 4px 3px 6px / 2px 4px;


граница-верх-левый-радиус: 4px 2px;
граница-верх-правый-радиус: 3px 4px;
граница-нижний-правый-радиус: 6px 2px;
граница-нижний-левый-радиус: 3px 4px;
  
  
граница: сплошная 10 пикселей;
радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
  
окантовка: бороздка 1em красная;
радиус границы: 2em;
  
фон: золото;
бордюр: хребет золото;
радиус границы: 13em / 3em;
  
граница: нет;
радиус границы: 40 пикселей 10 пикселей;
фон: золото;
  
граница: нет;
радиус границы: 50%;
фон: бурливуд;
  
граница: пунктирная;
ширина границы: 10 пикселей 4 пикселя;
радиус границы: 10 пикселей 40 пикселей;
  
граница: пунктирная;
ширина границы: 2px 4px;
радиус границы: 40 пикселей;
  
 
  pre {
  маржа: 20 пикселей;
  отступ: 20 пикселей;
  ширина: 80%;
  высота: 80 пикселей;
}

pre # example-1 {
  граница: сплошная 10 пикселей;
  радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
}

pre # example-2 {
  окантовка: бороздка 1em красная;
  радиус границы: 2em;
}

pre # example-3 {
  фон: золото;
  бордюр: хребет золото;
  радиус границы: 13em / 3em;
}

pre # example-4 {
  граница: нет;
  радиус границы: 40 пикселей 10 пикселей;
  фон: золото;
}

pre # example-5 {
  граница: нет;
  радиус границы: 50%;
  фон: бурливуд;
}

pre # example-6 {
  граница: пунктирная;
  ширина границы: 10 пикселей 4 пикселя;
  радиус границы: 10 пикселей 40 пикселей;
}

pre # example-7 {
  граница: пунктирная;
  ширина границы: 2px 4px;
  радиус границы: 40 пикселей;
}

Live Samples

Таблицы BCD загружаются только в браузере

Border Radius — Tailwind CSS

round-none border-radius: 0px;
закругленная см радиус границы: 0. 125rem;
закруглено Радиус границы: 0,25 бэр;
закругленная радиус границы: 0,375 бэр;
округлое lg радиус границы: 0,5 бэр;
закругленный xl радиус границы: 0,75 rem;
закругленное 2xl радиус границы: 1 rem;
закругленное 3xl радиус границы: 1,5 бэр;
с закругленными краями border-radius: 9999px;
закругленный т-нет граница-верх-левый-радиус: 0 пикселей; граница-верх-правый-радиус: 0 пикселей;
закругленный t-sm граница-верх-левый-радиус: 0. 125rem; граница-верх-правый-радиус: 0,125 бэр;
закругленная граница-верх-левый-радиус: 0,25 бэр; граница-верх-правый-радиус: 0,25 бэр;
закругленный t-md граница-верхний-левый-радиус: 0,375 бэр; граница-верх-правый-радиус: 0,375 бэр;
закругленный t-lg граница-верх-левый-радиус: 0,5 бэр; граница-верх-правый-радиус: 0,5 бэр;
закругленный-t-xl граница-верх-левый-радиус: 0,75 бэр; граница-верх-правый-радиус: 0.75рем;
закругленный-t-2xl граница-верхний-левый-радиус: 1бэр; граница-верх-правый-радиус: 1 бэр;
закругленный-t-3xl граница-верх-левый-радиус: 1,5 бэр; граница-верх-правый-радиус: 1,5 бэр;
закругленный-полный граница-верх-левый-радиус: 9999 пикселей; граница-верх-правый-радиус: 9999 пикселей;
закругленный-r-none border-top-right-radius: 0px; граница-нижний-правый-радиус: 0px;
закругленный-r-sm граница-верх-правый-радиус: 0. 125rem; граница-нижний-правый-радиус: 0,125 бэр;
с закругленными углами граница-верх-правый-радиус: 0,25 бэр; граница-нижний-правый-радиус: 0,25 бэр;
закругленный r-md граница-верх-право-радиус: 0,375 бэр; граница-нижний-правый-радиус: 0,375 бэр;
закругленный-r-lg граница-верх-правый-радиус: 0,5 бэр; граница-нижний-правый-радиус: 0,5 бэр;
закругленный-r-xl граница-верх-правый-радиус: 0,75 бэр; граница-нижний-правый-радиус: 0.75рем;
закругленный-r-2xl граница-верх-правый-радиус: 1 rem; граница-нижний-правый-радиус: 1бэр;
закругленный-r-3xl граница-верх-правый-радиус: 1,5 бэр; граница-нижний-правый-радиус: 1,5 бэр;
закругленный-полный граница-верх-правый-радиус: 9999 пикселей; граница-нижний-правый-радиус: 9999 пикселей;
закругленный-б-нет граница-нижний-правый-радиус: 0px; граница-нижний-левый-радиус: 0 пикселей;
закругленный-b-sm граница-нижний-правый-радиус: 0. 125rem; граница-нижний-левый-радиус: 0,125 бэр;
закругленный-b граница-нижний-правый-радиус: 0,25бэр; граница-нижний-левый-радиус: 0,25 бэр;
закругленный-b-md граница-нижний-правый-радиус: 0,375 бэр; граница-нижний-левый-радиус: 0,375 бэр;
закругленный-b-lg граница-нижний-правый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр;
закругленный-b-xl граница-нижний-правый-радиус: 0.75рем; граница-нижний-левый-радиус: 0,75 бэр;
закругленный-b-2xl граница-нижний-правый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр;
закругленный-b-3xl граница-нижний-правый-радиус: 1,5 бэр; граница-нижний-левый-радиус: 1,5 бэр;
round-b-full border-bottom-right-radius: 9999px; граница-нижний-левый-радиус: 9999 пикселей;
закругленный-l-нет граница-верх-левый-радиус: 0px; граница-нижний-левый-радиус: 0 пикселей;
закругленный l-sm граница-верх-левый-радиус: 0. 125rem; граница-нижний-левый-радиус: 0,125 бэр;
закругленное l граница-верх-левый-радиус: 0,25 бэр; граница-нижний-левый-радиус: 0,25 бэр;
закругленный l-md граница-верх-левый радиус: 0,375 бэр; граница-нижний-левый-радиус: 0,375 бэр;
округлый l-lg граница-верх-левый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр;
закругленный-l-xl граница-верх-левый-радиус: 0,75 бэр; граница-нижний-левый-радиус: 0.75рем;
закругленный-l-2xl граница-верх-левый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр;
закругленный-l-3xl граница-верх-левый-радиус: 1,5 бэр; граница-нижний-левый-радиус: 1,5 бэр;
закругленный-l-полный граница-верх-левый-радиус: 9999 пикселей; граница-нижний-левый-радиус: 9999 пикселей;
закругленный tl-none граница-верхний-левый-радиус: 0 пикселей;
закругленный tl-sm граница-верх-левый-радиус: 0. 125rem;
закругленный tl граница-верх-левый-радиус: 0,25 бэр;
Round-TL-MD border-top-left-radius: 0,375 rem;
закругленный tl-lg граница-верхний-левый-радиус: 0,5 бэр;
Round-TL-XL border-top-left-radius: 0,75 rem;
Round-TL-2xl border-top-left-radius: 1rem;
закругленный-tl-3xl граница-верх-левый-радиус: 1.5рем;
round-tl-full border-top-left-radius: 9999px;
округленный-тр-нет граница-верх-правый-радиус: 0 пикселей;
закругленный tr-sm граница-верхний-правый-радиус: 0,125 бэр;
закругленный-tr граница-верх-правый-радиус: 0,25 бэр;
закругленный tr-md граница, верхний правый радиус: 0,375 бэр;
round-tr-lg border-top-right-radius: 0. 5рем;
round-tr-xl border-top-right-radius: 0,75 rem;
закругленный tr-2xl граница-верх-правый-радиус: 1 rem;
закругленный-tr-3xl граница-верх-правый-радиус: 1,5 бэр;
закругленный tr-полный border-top-right-radius: 9999px;
закругленный-br-нет граница-нижний-правый-радиус: 0px;
закругленный-br-sm граница-нижний-правый-радиус: 0.125rem;
с закругленными углами граница, нижний правый радиус: 0,25 бэр;
закругленный br-md граница-нижний-правый-радиус: 0,375 rem;
закругленный-br-lg граница-нижний-правый-радиус: 0,5 бэр;
round-br-xl border-bottom-right-radius: 0. 75rem;
закругленный-br-2xl граница-нижний-правый-радиус: 1бэр;
закругленный-br-3xl граница-нижний-правый-радиус: 1.5рем;
закругленный-полный граница-нижний-правый-радиус: 9999 пикселей;
закругленный-бл-нет граница-нижний-левый-радиус: 0px;
round-bl-sm border-bottom-left-radius: 0.125rem;
с закругленными углами граница, нижний левый, радиус: 0,25 бэр;
round-bl-md border-bottom-left-radius: 0.375rem;
закругленный-bl-lg граница-нижний-левый-радиус: 0.5рем;
round-bl-xl border-bottom-left-radius: 0. 75rem;
закругленный-bl-2xl граница-нижний-левый-радиус: 1бэр;
закругленный-bl-3xl граница-нижний-левый-радиус: 1,5 бэр;
round-bl-full border-bottom-left-radius: 9999px;

Закругленные углы | HTML Собака

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

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

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

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

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

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

Конечно, если вы хотите, чтобы граница…

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

Woop.

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

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

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 пикселей;
}
Наноо.

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

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

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

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

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

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

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

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

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

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

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

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


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

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


border-radius: 50%;
border-radius: 50%;

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

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

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

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


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

4.

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

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

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

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


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

border-radius | Закругленные углы

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

Примером этого является знак «Стоп». Если вы можете представить (или найти) знак «Стоп», у него острые края, что не выглядит естественным, он выделяется на фоне более мягких органических, естественных форм. Вот почему, когда вы разрабатываете веб-сайты и приложения, сообщения об ошибках или сообщения, которые вы хотите, чтобы пользователь видел, должны быть отформатированы в прямоугольниках с острыми краями, но в тех случаях, когда вы хотите, чтобы пользователь сосредоточил внимание на контенте или сделал его более светлым, могут возникнуть закругленные углы. быть вашим лучшим вариантом.

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

Свойство border radius является сокращением для border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius. Как и в случае с сокращением полей и отступов, border-radius идет по часовой стрелке, начиная с верхнего левого угла, верхнего правого, нижнего левого и заканчивая нижним правым.

Примеры длинных рамок и радиусов 

  .round-box {
 граница-верх-левый-радиус: 50%;
 граница-верх-правый-радиус: 50%;
 граница-нижний-левый-радиус: 50%;
 граница-нижний-правый-радиус: 50%;
}

Сокращенные примеры border-radius

Чтобы задать для всех 4 углов одинаковое значение, необходимо объявить одно значение:

  .round-box {
 радиус границы: 10 пикселей;
}

Если в объявлении 3 значения, то первое значение задает верхний левый угол, второе значение — верхнее правое и нижнее левое, а третье значение — нижнее правое:

 .round-box {
 радиус границы: 10 пикселей 40 пикселей 80 пикселей;
}

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

  . round-box-two {
радиус границы: 40% 0;
}

Если вы хотите иметь закругленный круг, вы можете использовать радиус границы 50% на квадратном элементе для создания круга, например:

  .round-box {
 радиус границы: 50%;
}

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

 .round-box {
 радиус границы: 20 пикселей 40 пикселей 60 пикселей 80 пикселей
}

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

  • вверху слева: 20px
  • вверху справа: 40 пикселей
  • внизу справа: 60 ​​пикселей
  • внизу слева: 80px

Дополнительные значения по горизонтали и вертикали

В свойстве можно указать другое значение для горизонтального радиуса и вертикального радиуса. Как и в предыдущем случае, вы можете определять значения в пикселях (px) или процентах (%). Значения перед косой чертой задают значения по горизонтали, значения после косой черты — значения по вертикали.

  .round-box {
 радиус границы: 10 пикселей / 50 пикселей;
}

вырезка

Иногда можно заметить, что цвет фона или содержимое выходит за пределы границы, если граница изогнута. Это можно предотвратить с помощью свойства background-clip:

  .round-box {
 радиус границы: 10 пикселей / 50 пикселей;
 -moz-background-clip: отступы;
 -webkit-background-clip: поле для заполнения;
 фон-клип: padding-box
}

Генератор радиуса границы

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

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

Браузер поддерживает border-radius, он поддерживается во всех основных браузерах (например, поддерживается вплоть до Internet Explorer версии 9) в течение многих лет и не требует никаких префиксов, таких как -webkit- и — моз-.

ресурсов

Дополнительная литература

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

Автор

Майкл Гирон

Майкл Гирон — старший дизайнер взаимодействия в Companies House в Кардиффе. Ранее Майк был дизайнером продуктов в GoCo Group, включая GoCompare, MyVoucherCodes и WeFlip. Также хорошо работает для таких брендов в Южном Уэльсе, как BrandContent и HEOR.

Округление границ в CSS | Words

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

Ширина границы немного особенная по сравнению с другими видами длины CSS. Все браузерные движки согласны с этими принципами:

  • Границы должны быть четкими . Сглаженные границы — отстой.
  • Границы должны быть ровными . Если две границы имеют одинаковую длину в вашем CSS, они должны быть одинаковой длины на отображаемой странице.

Отрисовка нечетких или неровных границ невозможна.

Правила, которые я собираюсь описать здесь, также применимы к шириной контура и column-rule-width по крайней мере в Gecko, кстати.

Округление

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

Ширина и граница - * - ширина вычисленные значения будут разными. Границы будет округлено до одного пикселя устройства .

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

Округление в меньшую сторону

По той же причине, если вы напишете что-то вроде:

Ширина и граница - * - ширина с могут не быть точно такого же размера. Они могут округлить до ближайшего размера пикселя устройства .

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

Итак, браузеров не согласны с тем, когда это сделать:

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

  • Blink выполняет макет с субпиксельной рамкой и округляет границу вниз на время покраски.

У обоих подходов есть свои плюсы и минусы.

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

Подход Blink не имеет этой проблемы, но имеет другие серьезные проблемы: вызывает разрывы от границ на задний план детей, или к фону того же элемента, если вы используете его в сочетании с background-clip: padding-box .

Например, что-то вроде этого (вам может потребоваться настроить границу субпикселей, чтобы увидеть проблему на экране и / или увеличивать и уменьшать масштаб) в идеале никогда показать любой белый цвет между фоном и рамкой, но в Chrome и safari ты можешь.

Округление в большую, а не в меньшую сторону было бы проблематичным в обеих ситуациях, по разным причинам. Для Firefox это означало бы, что дети, использующие границы в точный способ переполнится в некоторых разрешениях, но не в других. Для Blink это было бы означают, что полупрозрачные границы будут перекрываться с дочерними элементами.

Идеального решения не существует

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

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

Вариант использования background-clip: padding-box , который не работает, действительно печален, ИМО.

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

Мне интересно, что думают люди, которые проводят больше времени с CSS есть … Сталкивались ли вы с какой-либо из этих проблем как пользователь или разработчик? Какой из двух подходов причиняет больше боли?

Не стесняйтесь обращаться ко мне в твиттере или еще где-нибудь для мнений 🙂

Спасибо, что добрались до этого места.

CSS Border-Radius может это сделать?

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

TL / DR : Когда вы используете восемь значений, определяющих радиус границы в CSS, вы можете создавать органично выглядящие формы.УХ ТЫ. Нет времени все это читать? — мы сделали для вас наглядный инструмент. Найдите здесь.

Введение

Во время конференции Frontend Conference в Цюрихе в этом году Рэйчел Эндрю рассказала о , раскрывающем мощь CSS Grid Layout . В конце своего выступления она упомянула кое-что о старом свойстве CSS, которое застряло у меня в голове:

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

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

Освоение border-radius

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

Начнем с основ. Надеюсь, это вас не утомит. Вы, вероятно, знакомы с CSS, и вы также знаете радиус границы. Он существует уже несколько лет, в основном используется с одним значением вроде этого: border-radius: 1em и, возможно, был одной из самых обсуждаемых / любимых функций CSS3 еще в 2010 году, когда css3please.ком был твоим лучшим другом.

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

Как вы можете видеть в приведенном выше примере, рядом со значениями фиксированной длины, такими как пикселей , rem или em , вы также можете использовать проценты. Они в основном используются для создания круга путем установки радиуса границы на 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его на прямоугольнике, у вас больше не будет симметричных углов.Вот пример, показывающий разницу между border-radius: 110px и border-radius: 30% , примененным к прямоугольнику.

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

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

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

Восемь значений, разделенных косой чертой (вот что интересно)

Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы переходим к захватывающей части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Давайте посмотрим, что об этом говорится в спецификации:

«Если значения указаны до и после косой черты, то значения перед косой чертой задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус. Если косой черты нет, то значения устанавливают оба радиуса одинаково. ”W3C

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

Итак, когда вы сравниваете border-radius: 4em 8em с border-radius: 4em / 8em , результаты сильно отличаются.

Симметричные углы слева образуют четверть круга, а асимметричные углы справа — часть многоточия.

Формы, которые вы получаете с этим, выглядят немного странно, если честно. Но помните круги, которые вы создаете с радиусом границы : 50% . Вы получаете круг, потому что оба значения, определяющие одну сторону, в сумме составляют 100% (50% + 50% = 100%), и не остается прямой линии, которая напоминает вам исходный квадрат. Если вы примените ту же логику к полному синтаксису радиуса границы с восемью значениями, вы можете создать фигуру, которая немного похожа на плектр или органическую ячейку:

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

Не паникуйте … мы сделали для вас визуальный генератор

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

FANCY BORDER RADIUS

Do (not) Cross the Streams

Теперь, когда вы знаете о 8 значениях в целом, вам может быть немного грустно, потому что наш инструмент радиуса границы не дает у вас есть возможность установить каждое значение отдельно … Подождите, вот версия 8-POINT-FULL-CONTROL .

Если вы достаточно взрослые, вы, возможно, помните эту цитату из фильма «Охотники за привидениями» 1984 года:

«Не переходи потоки».

No related posts.

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

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