html5 — Как сделать закругленные углы в html
Как сделать закругленные углы в html
- html
- html5
- css
Если у всех четырёх углов нужен одинаковый радиус, то можно написать одно свойство вместо четырёх:
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
Последняя строчка для Оперы и ИЕ9.
Для решения этой проблемы можно воспользоваться css стилями.
Chrome, Safari.
-webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px;
Firefox.
-moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px;
Современный вариант для всех браузеров: border-radius: 5px;
2
В свое время искал универсальное решение данной проблемы для всех браузеров, многие предлагали разместить в углах картинки с изображениями закруглений необходимого радиуса.
1
Всего существует 3 варианта.
1-й: (от Expert)
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
2-й: (от Евген)
Спрайт с четырьями углами, положение задается через background-position
3-й: (самый старый способ)
<div></div> <div></div> <div></div> <div></div>
Где классы имеют последовательное уменьшение отступов слевой и справой стороны.
сокращенный вариант border-radius: 10px 5px 4px 8px; углы начинаются от верхнего-левого/верхний-правый/нижний-правый/нижний-левый
Зарегистрируйтесь или войдите
Регистрация через GoogleРегистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
border-radius — закругленная рамка (скругление углов)
Поддержка браузерами
12. 0+ |
9.0+ | 4.0+ | 5.0+ | 10.5+ | 5.0+ |
Описание
CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:
Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:
|
|
|
|
|
|
|
Овальные скругления
CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:
Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ /:
border-radius: 50px / 30px;
Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.
Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.
Пример с овальными скруглениями:
|
Важно понимать, что форма элемента в любом случае остаётся прямоугольной.
Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:
Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse; |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.borderRadius=»5px» |
Синтаксис
border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]Значения свойства
| Значение | Описание |
|---|---|
| величина | Величина радиуса указывается в единицах измерения, используемых в CSS. |
| % | Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
border-radius:
100px
50px
10px 30px
5px
3px
20% 10%
25%
50%
div {
border-radius: 100px;
}
border-radius | Закругленные углы
Теория закругления углов заключается в том, что для их обработки требуется меньше когнитивных усилий. Скругление углов не только упрощает обработку, но и делает их более привлекательными для глаз. Идея заключается в том, что мы ассоциируем острые формы с опасностью, а более мягкие формы — с дружелюбием и безопасностью.
Смещение, стоящее за этим, известно как смещение контура, когда мы отдаем предпочтение объектам с контурами, а не четким объектам.
Примером этого является знак остановки, если вы можете представить (или найти) знак остановки, у него есть острые края, которые не выглядят естественными, он выделяется на фоне органических, естественных форм, которые более мягкие. Вот почему, когда вы разрабатываете веб-сайты и приложения, сообщения об ошибках или сообщения, которые вы хотите, чтобы пользователь увидел, должны быть отформатированы в виде блоков с острыми краями, но в случаях, когда вы хотите, чтобы пользователь сосредоточился на содержимом или сделал его более легким, закругленные углы могут быть вашим лучшим вариантом.
Свойство border-radius можно использовать для создания закругленных углов элементов. Значение свойства может быть либо в единицах длины, либо в процентах. Вы также можете анимировать радиус, используя функцию calc(), процентное значение или значение длины.
Свойство радиуса границы является сокращением для границы-верхнего-левого-радиуса, границы-верхнего-правого-радиуса, границы-нижнего-левого-радиуса и границы-нижнего-правого-радиуса. Как и при сокращении отступов и полей, border-radius идет по часовой стрелке, начиная с левого верхнего угла, правого верхнего, левого нижнего и заканчивая правым нижним.
Примеры длинной формы с радиусом границы
.round-box{
граница-верхний-левый-радиус: 50%;
граница-верхний-правый-радиус: 50%;
граница-нижний-левый-радиус: 50%;
граница-нижний-правый-радиус: 50%;
} Сокращенные примеры радиуса границы
Чтобы установить все 4 угла с одинаковым значением, вам нужно объявить одно значение:
.round-box{
радиус границы: 10px;
} Если в объявлении 3 значения, то первое значение задает верхний левый, второе значение — верхний правый и нижний левый, а третье значение — нижний правый:
.круглая коробка{
радиус границы: 10 пикселей 40 пикселей 80 пикселей;
} Чтобы установить для верхнего левого и нижнего правого одинаковые значения, а для верхнего правого и нижнего левого — разные значения, используйте два значения:
.round-box-two{ радиус границы: 40% 0; }
round-box-two{
радиус границы: 40% 0;
} Если вы хотите иметь закругленный круг, вы можете использовать радиус границы 50% на квадратном элементе, чтобы создать круг, например:
.round-box{
радиус границы: 50%;
} Если вы хотите иметь разные радиусы для каждого угла, вы можете сделать это:
.круглая коробка{
радиус границы: 20px 40px 60px 80px
} Результат будет таким:
- вверху слева: 20px
- вверху справа: 40px
- внизу справа: 60px
- внизу слева: 80px
Необязательные значения по горизонтали и вертикали
Свойство может иметь другое значение для горизонтального радиуса и вертикального радиуса. Как и в предыдущем случае, вы можете указать значения в пикселях (px) или процентах (%). Значения перед косой чертой задают горизонтальные значения, значения после косой черты — вертикальные значения.
.круглая коробка{
радиус границы: 10 пикселей / 50 пикселей;
} Отсечение
Иногда можно заметить, что цвет фона или содержимое выходят за границы, если граница изогнута.
Используя свойство background-clip, это может предотвратить это:
.round-box{
радиус границы: 10 пикселей / 50 пикселей;
-moz-background-clip: заполнение;
-webkit-background-clip: отступы;
фоновый клип: padding-box
} Генератор радиуса границы
Существует онлайн-инструмент, который позволяет вам генерировать радиус границы для вас. По умолчанию он добавляет префикс поставщика, но, как мы увидим дальше, вам может не понадобиться префикс поставщика.
Поддержка браузера
Поддержка браузером хороша для border-radius, она поддерживается во всех основных браузерах (например, поддерживается вплоть до Internet Explorer версии 9) в течение многих лет и не требует никаких префиксов, таких как -вебкит- и -moz-.
Ресурсы
- Документы Mozilla
- Генератор радиуса границы
Дальнейшее чтение
Это свойство можно использовать с другими свойствами, такими как граница и тень блока. Вот еще несколько руководств по CSS, которые вы можете прочитать:
- !важное правило в CSS: когда и как его использовать
- Как отключить выделение текста с помощью CSS
- CSS: фокус внутри псевдокласса
Автор:
Майк Майкл Гирон — старший дизайнер взаимодействия в Правительственной цифровой службе (GDS) в Кардиффе.
Ранее Майк был дизайнером продуктов в GoCo Group, включая GoCompare, MyVoucherCodes и WeFlip. А также работа с брендами в Южном Уэльсе, такими как BrandContent и HEOR.
Css Закругленные углы с примерами кода
Css закругленные углы с примерами кода
В этом посте мы рассмотрим, как решить проблему закругленных углов Css, используя примеры из языка программирования.
/* Установить закругленные углы с помощью свойства border-radius */
.учебный класс {
радиус границы: 4px;
}
.круг {
радиус границы: 50%;
}
Решение той же проблемы, Css Rounded Corners, также можно найти в другом методе, который будет обсуждаться ниже с некоторыми примерами кода.
#rуглы {
радиус границы: 25px;
}
#roundCornerID {
радиус границы: 30%;
ширина: 200 пикселей;
высота: 150 пикселей;
}
/* Использовать свойство радиуса границы */
.учебный класс {
радиус границы: 5px;
}
.круг {
радиус границы: 50%;
}
/* Синтаксис первого радиуса допускает от одного до четырех значений */ /* Радиус задан для всех 4 сторон */ радиус границы: 10px; /* верхний левый и нижний правый | верхний правый и нижний левый */ радиус границы: 10px 5%; /* верхний левый | верхний правый и нижний левый | Нижний правый */ радиус границы: 2px 4px 2px; /* верхний левый | вверху справа | внизу справа | Нижняя левая */ радиус границы: 1px 0 3px 4px; /* Синтаксис второго радиуса допускает от одного до четырех значений */ /* (первое значение радиуса) / радиус */ радиус границы: 10px/20px; /* (значения первого радиуса) / верхний левый и нижний правый | верхний правый и нижний левый */ радиус границы: 10 пикселей 5% / 20 пикселей 30 пикселей; /* (значения первого радиуса) / верхний левый | верхний правый и нижний левый | Нижний правый */ радиус границы: 10px 5px 2em / 20px 25px 30%; /* (значения первого радиуса) / верхний левый | вверху справа | внизу справа | Нижняя левая */ радиус границы: 10px 5% / 20px 25em 30px 35em; /* Глобальные значения */ радиус границы: наследовать; радиус границы: начальный; радиус границы: не установлен;
#дел1{
ширина: 150 пикселей;
высота: 150 пикселей;
фон: #05ffb0;
радиус границы: 20px;
}
Чтобы решить проблему со скругленными углами Css, мы рассмотрели множество случаев.
Как создать закругленный угол с помощью CSS?
Свойство CSS border-radius скругляет углы внешней границы элемента. Вы можете установить один радиус для создания круглых углов или два радиуса для создания эллиптических углов. Свойства составляющих
- граница-верхний-левый-радиус.
- граница-верхний-правый-радиус.
- граница-нижний-правый-радиус.
- граница-нижний-левый-радиус.
Как скруглить углы коробки с помощью CSS?
Чтобы создать простой блок со скругленными углами, добавьте свойство border-radius в box1 . Свойство border-radius — это сокращенное свойство, которое устанавливает радиус для всех четырех углов блока равным одному и тому же значению, если задано только одно значение.
Как скруглить углы изображения в CSS?
Свойство CSS border-radius добавляет закругленные углы. Вы можете поэкспериментировать с разными значениями, чтобы получить то, что вам нравится. радиус границы: 75px; Если вы хотите, чтобы это был круг, добавьте border-radius: 50%; .
Как вы скругляете углы?
Как создать изогнутый элемент div в CSS?
Требуется HTML: потребуется только один элемент div с некоторым классом, т.е. подходы на основе CSS:
- Создайте слой с псевдоэлементом ::before OR ::after, ширина и высота которого больше, чем у его родителя.
- Добавьте радиус границы, чтобы создать закругленную форму.
- Добавить переполнение: скрыто для родителя, чтобы скрыть ненужную часть.
Как создать div в виде круга в CSS?
Чтобы создать круг, мы можем установить радиус границы элемента. Это создаст изогнутые углы на элементе. Если мы установим его на 50%, он создаст круг. Если вы зададите другую ширину и высоту, вместо этого мы получим овал.05-Feb-2020
Как добавить кривую в поле в CSS?
Мы добавляем кривые через CSS, обращаясь к элементам и применяя фоновое изображение. Верхний применяется к тегу h3, а нижний — к тегу p. Убедитесь, что фон div тоже такого же цвета.