Скругление углов css: Скруглённые уголки | htmlbook.ru

Содержание

свойство 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 3 / Хабр



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

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div></div>
</body>

В CSS зададим для него высоту, ширину и цвет фона:
#box {
width:590px;
height:100px;
background-color:#6B86A6; }

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box {
-moz-border-radius: 20px;
}

Теперь все четыре угла будут иметь радиус 20px:

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

#box {
-moz-border-radius:20px 40px;
}

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box {
-moz-border-radius:10px 20px 30px 40px;
}

Объявляем свойство border-radius для каждого угла

Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:
  • moz-border-radius-topleft для верхнего левого угла;
  • moz-border-radius-topright для верхнего правго угла;
  • moz-border-radius-bottomright для нижнего правого угла;
  • moz-border-radius-bottomleft для нижнего левого угла;


Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box {
-moz-border-radius-topleft: 30px 15px;
}

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

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}


Использование свойства border-radius в Safari и Chrome.

Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:
  • -webkit-border-top-left-radius для верхнего левого угла;
  • -webkit-border-top-right-radius для верхнего правого угла;
  • -webkit-border-bottom-right-radius для нижнего правого угла;
  • -webkit-border-bottom-left-radius для нижнего левого угла;

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

Этот код не будет работать в Safari и Chrome:
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}

Правильный код будет выглядеть так:
#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box {
-webkit-border-top-left-radius: 30px 15px;
}

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

#box {
-webkit-border-radius: 30px 15px;
}

Примеры.

Создаем закруглённые уголки с помощью CSS 3 / Хабр


Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство

border-radius

. С помощью свойства

border-radius

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

Кроссбраузерная совместимость.

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div></div>
</body>

В CSS зададим для него высоту, ширину и цвет фона:
#box {
width:590px;
height:100px;
background-color:#6B86A6; }

Добавляем свойство border-radius:

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


#box {
-moz-border-radius: 20px;
}

Теперь все четыре угла будут иметь радиус 20px:

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

#box {
-moz-border-radius:20px 40px;
}

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box {
-moz-border-radius:10px 20px 30px 40px;
}

Объявляем свойство border-radius для каждого угла

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


  • moz-border-radius-topleft для верхнего левого угла;
  • moz-border-radius-topright для верхнего правго угла;
  • moz-border-radius-bottomright для нижнего правого угла;
  • moz-border-radius-bottomleft для нижнего левого угла;


Горизонтальный и вертикальный радиус

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


#box {
-moz-border-radius-topleft: 30px 15px;
}

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

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}


Использование свойства border-radius в Safari и Chrome.

Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:


  • -webkit-border-top-left-radius для верхнего левого угла;
  • -webkit-border-top-right-radius для верхнего правого угла;
  • -webkit-border-bottom-right-radius для нижнего правого угла;
  • -webkit-border-bottom-left-radius для нижнего левого угла;

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

Этот код не будет работать в Safari и Chrome:
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}

Правильный код будет выглядеть так:
#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:


#box {
-webkit-border-top-left-radius: 30px 15px;
}

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box {
-webkit-border-radius: 30px 15px;
}

Примеры.

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

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

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

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

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

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

Как, например, здесь:

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

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

<div class=”round-corner”> </div>

<div class=”round-corner”>

</div>

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner{ height:100px; width:200px; background:#2F73B6; }

.round-corner{

height:100px;

width:200px;

background:#2F73B6;

}

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

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

Например:

border-radius: 10%;

И вот что мы получим в итоге:

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

Как закруглить углы картинки при помощи CSS?

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

Для картинки CSS код будет выглядеть так:

.content img { border-radius: 20px; }

.content img {

border-radius: 20px;

}

Вот что получится:

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

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

  1. 1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

    . round-corner{ border-radius: 20px; }

    .round-corner{

    border-radius: 20px;

    }

    Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

  2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

    Выглядеть это будет так:

    <style> .round-corner{ border-radius: 20px; } </style>

    <style>

    .round-corner{

    border-radius: 20px;

    }

    </style>

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

    <img src=”images/pic.png” style=” border-radius: 20px;”

    <img src=”images/pic. png” style=” border-radius: 20px;”

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

Как ещё можно закруглить углы при помощи CSS?

В примере выше я показала как закруглить сразу все 4 угла, но благодаря данному CSS свойству можно закруглять углы по отдельности и задавать им разный радиус закругления.
Для этого всего лишь нужно указать не одно, а четыре значения (для каждого угла своё)

  1. 1.На первом месте – левый-верхний угол
  2. 2.На втором – правый верхний угол
  3. 3.На третьем – правый нижний угол
  4. 4.На четвёртом – левый нижний

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

Для этого нужно прописать:

border-radius: 0 80% 0 80%;

border-radius: 90% 100% 0 100%;

border-radius: 100% 100% 0 0;

border-radius: 100% 25% 25% 100%;

border-radius: 100%/50%;

border-radius: 100%;

Как видите всё просто! Надеюсь, что у вас не возникнет проблем с созданием закруглённых углов при помощи CSS!

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

Если будут какие то вопросы – пишите их в комментариях. На этом сегодня всё! До встречи в следующих статьях 🙂

Совет 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 с нуля

Смотреть

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

basicweb. ru
  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML

  • HTML учебник
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Мнемоники
  • Коды языков
  • HTML цвета
  • Тесты знаний

CSS

  • CSS учебник
  • Справочник свойств
  • CSS селекторы
  • CSS функции
  • CSS правила
  • Flexbox генератор
  • Grid генератор
  • LESS учебник

JavaScript

  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math β
  • Объект Number
  • Объект Object
  • Объект Promise
  • Объект RegExp
  • Объект String

jQuery

  • jQuery селекторы
  • jQuery события
  • jQuery методы DOM
  • jQuery перемещения
  • jQuery утилиты
  • jQuery эффекты
  • jQuery AJAX
  • jQuery объект Callbacks
  • jQuery объект Deferred

CSS свойства

  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style

Создание закругленных углов с помощью CSS 3

  1. Веб-дизайн и разработка
  2. Создание закругленных углов с помощью CSS 3

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

Независимо от того, пробовали ли вы старую технику, вы обязательно оцените, насколько проще создавать закругленные углы, когда вы используете свойство CSS 3 border-radius.

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

Вы можете применить радиус границы к любому объекту коробки, например к тегу

или тегу

. Вот синтаксис для создания закругленных углов в CSS 3 для браузеров WebKit (обратите внимание, что r представляет радиус , расстояние от центра круга до изогнутого угла):

 -webkit-border-radius: длина r; 

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

 -webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 25 пикселей;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 25 пикселей; 

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

 -webkit-border-radius: 50px 100px; 

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

 -webkit-border-radius: 1em; 

В этом примере также использовались падающая тень и градиент. Вы можете добавить тени с помощью CSS 3.

Идеально скругленные углы с CSS

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

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

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

  - отличный способ постепенно улучшить визуальное представление дизайна (вообще говоря). 

Хорошая новость об использовании CSS для создания эффектов с закругленными границами заключается в том, что этот эффект можно применять во многих различных браузерах.Конечно, Internet Explorer не может с этим справиться, но в этом вся идея прогрессивного улучшения, верно? Браузеры, которые «понимают», пользуются преимуществами, в то время как те, которые не могут нормально работать без улучшений. Итак, для тех из вас, кто ищет полную коллекцию фрагментов кода быстрого копирования и вставки для легкого закругления углов с помощью CSS, вот вам:

CSS Закругленные углы для всех четырех углов

Этот рецепт CSS с закругленными углами применяет эффект закругленных углов радиусом 10 пикселей ко всем четырем углам любого блочного элемента:

  / * 4 закругленных угла * /
.all-four-закругленные углы {
-webkit-border-radius: 10 пикселей;
-khtml-border-radius: 10 пикселей;
-moz-border-radius: 10 пикселей;
радиус границы: 10 пикселей;
}  

CSS Закругленные углы для верхнего левого угла

Этот рецепт CSS с закругленными углами применяет эффект закругленных углов с радиусом 10 пикселей к верхнему левому углу любого поддерживающего элемента уровня блока:

  / * скругленный верхний левый угол * /
.top-left-round-corner {
-webkit-border-top-left-radius: 10 пикселей;
-khtml-border-radius-topleft: 10 пикселей;
-moz-border-radius-topleft: 10 пикселей;
граница-верх-левый-радиус: 10 пикселей;
}  

CSS Закругленные углы для верхнего правого угла

Этот рецепт CSS с закругленными углами применяет эффект закругленных углов с радиусом 10 пикселей к верхнему правому углу любого вспомогательного элемента уровня блока:

  / * скругленный верхний правый угол * /
.верхний-правый-закругленный-угол {
-webkit-border-top-right-radius: 10 пикселей;
-khtml-border-radius-topright: 10 пикселей;
-moz-border-radius-topright: 10 пикселей;
граница-верх-правый-радиус: 10 пикселей;
}  

CSS Закругленные углы для левого нижнего угла

Этот рецепт CSS с закругленными углами применяет эффект закругленных углов радиусом 10 пикселей к нижнему левому углу любого поддерживающего элемента уровня блока:

  / * скругленный нижний левый угол * /
.bottom-left-закругленный-угол {
-webkit-border-нижний левый радиус: 10 пикселей;
-khtml-border-radius-bottomleft: 10 пикселей;
-moz-border-radius-bottomleft: 10 пикселей;
граница-нижний-левый-радиус: 10 пикселей;
}  

CSS Закругленные углы для нижнего правого угла

Этот рецепт CSS с закругленными углами применяет эффект закругленных углов с радиусом 10 пикселей к нижнему правому углу любого вспомогательного элемента уровня блока:

  / * нижний правый скругленный угол * /
.нижний-правый-закругленный-угол {
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10 пикселей;
-moz-border-radius-bottomright: 10 пикселей;
граница-нижний-правый-радиус: 10 пикселей;
}  

The Full Meal Deal - несимметричные закругленные углы CSS

Этот рецепт CSS применяет несимметричные закругленные углы ко всем четырем углам любого поддерживающего элемента уровня блока. Этот метод в основном записывает различные граничные правила индивидуально, тем самым обеспечивая разные значения для каждого радиуса закругленных углов.Смущенный? Не будет; просто посмотрите следующий код, и все будет совершенно ясно:

  / * закругленные углы с разнесенными частями * /
.exploded-round-corners {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-нижний левый радиус: 10 пикселей;
-webkit-border-top-right-radius: 10 пикселей;
-webkit-border-top-left-radius: 10 пикселей;

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

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

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

Round ‘em!

Сообщите мне, если я что-то упустил.. Я хочу предоставить простой, полный и точный справочник по копированию и вставке для создания закругленных углов с помощью CSS. Так что, если вам известны какие-либо связанные приемы или приемы, поделитесь ими в разделе комментариев. В противном случае до встречи в следующем посте! Спасибо за чтение 🙂

Об авторе

Джефф Старр = Творческий мыслитель. Увлечен бесплатным и открытым Интернетом.

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

Ресурсы Кейт Брайант • 6 июня 2016 г. • 6 минут ПРОЧИТАТЬ

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

Закругленные углы легки для глаз (и для мозга)

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

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

Острые углы прерывают мысль. Чтобы визуализировать форму с острыми углами, мозг обрабатывает точку A в точку B, ненадолго делает паузу, а затем переходит от точки B к C и так далее, пока не завершит кругооборот. В случае прямоугольника вашему мозгу требуется 4 вычисления, чтобы его распознать. С закругленными углами резкой паузы никогда не бывает, и ваш мозг выполняет только одно вычисление, пока ваши глаза плавно просматривают его края.

Какой из них приятнее для глаз?

Конструктор шаблонов электронной почты в Интернете

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

Попробуйте бесплатноДругие продукты

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

Шел 1981 год, а Macintosh все еще находился в начальной стадии разработки.Постоянному мастеру графики Биллу Аткинсону только что удалось заставить свою ОС рисовать круги и эллипсы, и он гордился этим. Однако у Стива Джобса, отца Macintosh, была другая, более настоятельная просьба: прямоугольник со скругленными углами .

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

Аткинсону удалось разработать код, необходимый для визуализации прямоугольников с закругленными углами с молниеносной скоростью. Кнопки и окошки стали закругленными. Это помогло определить «безопасный» интерфейс Macintosh. Для клиентов Mac казался более мягким и приветливым, что контрастировало с пугающей аурой продуктов IBM и Microsoft.

Наследие Apple с закругленными углами выходит за рамки программного обеспечения. На момент своего появления iPhone был более «карманным» , чем другие телефоны того времени.Точно так же iMac не был таким устрашающим, как стандартный «персональный компьютер» того времени: Mac казался непринужденным другом; ПК, человек в темном костюме.

Джобс понял. Apple это понимает. Мы запрограммированы избегать острых предметов и не любить их.

Кого из них вы позволили бы прикоснуться к своему 4-летнему ребенку?

Острые углы говорят: «Уходи», «Не трогай меня» или «Я тебя поцарапаю» ; закругленные углы говорят: «Меня можно держать». В детстве нас учили держаться подальше от ножей и острых предметов, потому что они могут причинить нам вред.

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

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

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

Закругленные углы вызывают тепло и доверие. По этой причине многие называют их «дружественными прямоугольниками» . Именно поэтому многие кнопки призыва к действию (a.k.a.кнопки покупки или регистрации) сконструированы таким образом. Это позволяет клиентам чувствовать себя в безопасности при ведении бизнеса с брендом.

На удобной домашней странице Wufoo вы сможете уверенно вести с ними дела.

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

Кодирование закругленных углов: CSS3

Многие дизайнеры избегают использования CSS3 из-за его ограниченной совместимости с браузером, особенно с IE. Тем не менее, есть основные свойства CSS3, которые уже работают во всех современных браузерах, включая IE 9 и выше. Один из них - это border-radius , который позволяет нам добавлять закругленные углы к элементу, просто указав радиус.

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

HTML

Разметка блока состоит из одного блока div и двух классов. Коробка Класс определяет размеры коробки, тогда как класс с закругленными углами имеет дело с углами.

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

CSS

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

.box {
ширина: 200 пикселей;
высота: 150 пикселей;
цвет фона: # FC5D8A;
цвет: #fff;
маржа: 3em auto;
}

.округлый {
-webkit-border-radius: 10 пикселей;
-moz-border-radius: 10 пикселей;
радиус границы: 10 пикселей;
}
 

По сути, с использованием border-radius , как наложение четырех кругов с радиусом 10 пикселей по углам рамки и вырезание области за границы, как показано на изображении ниже (щелкните его, чтобы просмотреть демонстрацию) .

Поскольку браузеры постепенно развертывают совместимость с CSS3, некоторые из них предоставляют только экспериментальную поддержку, которая может быть обработана с помощью префикса поставщика .В нашем случае мы использовали -webkit для Safari и Chrome и -moz для Firefox. IE использует стандартное свойство без префикса.

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

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

До того, как появился CSS3, были повороты карате.Дизайнер Кайл Шеффер популяризировал эту технику, в которой используется только одно изображение PNG без скриптов.

Изображение

Для этой демонстрации мы создадим оранжевый прямоугольник с закругленными углами. Чтобы создать закругленные углы размером 10 пикселей, нам нужно создать изображение круга диаметром 20 пикселей. Круг должен иметь тот же цвет, что и фон контейнера, например:

HTML

Код HTML сложнее, чем его эквивалент в CSS3, но все же достаточно прост.Здесь у нас есть внешний div для представления самого блока и еще 4 внутри него для представления углов. Пятый div служит оболочкой для текста.

Любовь - это не любовь, которая меняется, когда ее находят.

Класс NW представляет верхний левый угол рамки, NE представляет верхний правый угол и так далее для SW и SE .Мы будем использовать CSS, чтобы расположить классы в каждом из углов контейнера.

CSS

.ounded-box {
положение: относительное;
фон: # FC5D8A;
ширина: 100%;
}

.corner {
позиция: абсолютная;
ширина: 10 пикселей;
высота: 10 пикселей;
фон: url ('corners.gif') без повтора;
размер шрифта: 0%;
}

.ounded-box-content {
отступ: 10 пикселей;
}

.NW {
верх: 0;
слева: 0;
background-position: 0 0;
}
.NE {
верх: 0;
справа: 0;
background-position: -10px 0;
}
.SW {
внизу: 0;
слева: 0;
фоновая позиция: 0 -10 пикселей;
}
.SE {
внизу: 0;
справа: 0;
фоновая позиция: -10px -10px;
}
 

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

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

Заключение

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

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

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

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