Закругление углов CSS
- HTML
- CSS
- CMS
- CSS
- Закругление углов
Одинаковый радиус для всех углов
Для того чтобы установить одинаковый радиус для всех углов блока нужно указать одно значение:
border-radius: 20px;
Чтобы радиус отображался в других браузерах, запись производится с дополнительными префиксами:
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
Префикс -moz записывается для отображения в браузере Firefox,
а –webkit, для Safari и Google Chrome.
HTML <div> </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> </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> </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> </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%;
}
© 2012 – 2023
Скругление углов CSS | Impuls-Web.
ruКатегория: Сайтостроение, Опубликовано: 2017-12-25
Автор: Юлия Гусарь
Приветствую вас, дорогие читатели!
Довольно часто, при верстке страниц, в зависимости от дизайна, появляется необходимость в скруглении углов блоков и изображений для придания странице более аккуратного вида. В сегодняшней статье я покажу вам, как это можно сделать с помощью CSS-свойств.
Навигация по статье:
- Простое скругление углов CSS
- Варианты скругления углов CSS
- Необычное скругление углов 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?
Обзор
Цель CSS — сделать HTML-документы эстетически привлекательными. При разработке веб-страницы могут быть случаи, когда мы хотим, чтобы некоторые элементы или изображения имели закругленные углы. Здесь в игру вступает свойство CSS border-radius.
- Мы можем использовать свойство border-radius , чтобы добавить закругленные углы CSS к любому элементу.
- Мы можем часто называть закругленные границы «удобными прямоугольниками», потому что они подразумевают комфорт, безопасность и надежность, которые улучшают взаимодействие с пользователем.
- Чтобы добавить закругленные углы CSS к элементу, изображению или границе, мы можем использовать свойство border-radius и указать значение радиуса в пикселях, процентах или em.
- Свойство border-radius может иметь от одного до четырех значений.
- Мы можем независимо указать border-radius для каждого угла, используя составные свойства, такие как border-top-left radius , border-bottom-right radius и т. д.
- Мы также можем использовать свойство border-radius для создания эллиптических границ.
Эта статья поможет нам понять, как использовать свойство border-radius, чтобы придать элементу CSS закругленные углы.
Предварительные условия
Прежде чем продолжить, убедитесь, что вы понимаете основные принципы пограничной собственности.
Синтаксис
Свойство CSS border-radius — это сокращенное свойство, которое равномерно скругляет все углы элемента. Мы можем указать радиус границы в пикселях или процентах.
Возможные значения для закругленных углов
| Значение | Описание | Пример |
|---|---|---|
| длина | Мы можем использовать значения длины для указания радиуса. | радиус границы : 10px ; |
| проценты | Мы можем использовать процентные значения для указания радиуса. | радиус границы: 5% ; |
Отрицательные значения недопустимы.
Стандартный
Для различных браузеров, включая Chrome и Firefox, мы можем определить закругленные углы CSS с помощью border-radius , добавив к свойству префикс -webkit и -moz. «-webKit» и «-moz» — это префиксы поставщиков в CSS, предлагаемые механизмами рендеринга Chrome и Firefox соответственно. Эти префиксы позволяют нам использовать функции CSS без внесения несоответствий.
| Standard | Эквивалент Mozilla | Эквивалент Webkit |
|---|---|---|
| border-radius: 10px; | -moz-border-radius: 10px; | -webkit-border-radius: 10px; |
Нам нужна только стандартизированная версия, поскольку все браузеры поддерживают официальный синтаксис CSS.
Это не обязательно, но мы можем добавить к свойству префикс «-webKit» и «-moz», чтобы обеспечить полную поддержку устаревшего браузера.
Индивидуальные углы
Свойство border-radius — это сокращенное свойство, определяющее радиус для всех углов элемента. Мы можем независимо указать радиус границы для каждого угла, используя следующие составляющие свойства:
| Составляющая собственность | Эквивалент Mozilla | Эквивалент Webkit | Описание | Пример |
|---|---|---|---|---|
| граница-верхний левый радиус | -moz-граница-радиус-верхний левый | -webkit-граница -top-left-radius | Скругляет верхний левый угол элемента. | граница-верхний-левый-радиус : 10px ; |
| граница-верхний-правый-радиус | -moz-граница-радиус-верхний правый | -webkit-border-top-right-radius | Скругляет правый верхний угол элемента. | border-top-right-radius : 10px ; |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius | Скругляет нижний левый угол элемента. | граница-нижний-правый-радиус: 10px; |
| граница-нижняя-левая-радиус | -moz-граница-радиус-нижняя левая | -webkit-граница-нижняя-левая-радиус | Скругляет правый нижний угол элемента. | граница-нижний-левый-радиус: 10px; |
Сокращенное свойство
- Мы можем указать одиночное значение , если хотим равномерно скруглить углы.
- Мы можем указать два значения . Первое значение задает верхний левый и нижний правый углы, а другое применяется к верхнему правому и нижнему левому углам.
- Можно указать три значения . Первое значение применяется к верхнему левому углу, второе значение — к верхнему правому и нижнему левому углам, а третье значение — к нижнему правому углу.
- Мы можем даже указать четыре значения . Первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу.
- Сокращенное свойство эквивалента Mozilla выглядит следующим образом:
Эллиптическое скругление
Могут быть ситуации, когда мы предпочитаем эллиптические углы полностью симметричным. Мы можем указать горизонтальный и вертикальный радиусы с косой чертой между ними, чтобы создать такие углы.
СИНТАКСИС
Пример
- Одна пара значений горизонтального и вертикального радиусов скругляет все четыре угла.
- Если нам нужна более сложная форма, мы можем использовать четыре значения для горизонтального и вертикального радиусов. Пример
- Составляющие свойства остаются теми же для эллиптического округления. Мы можем указать радиус границы для каждого угла отдельно, используя значения, разделенные пробелом, а не косой чертой. Пример
Мы можем указать радиус границы для каждого угла отдельно, используя значения, разделенные пробелом, а не косой чертой. Пример Эллиптическое округление (Firefox 3.5+)
СИНТАКСИС
Нам нужен префикс -moz-, так как Mozilla Firefox 3.5 допускал только скругление углов. Однако более поздние версии Firefox также позволяют использовать эллиптические углы.
Этот синтаксис также применяется к другим составляющим свойствам.
Пример
Эллиптическое округление (Firefox 3.5+)
- Одна пара значений горизонтального и вертикального радиусов скругляет все четыре угла.
- Мы можем даже указать четыре значения для горизонтального и вертикального радиусов. Эти значения представляют верхний левый, верхний правый, нижний правый и нижний левый углы.
Эллиптическое округление WebKit
Все углы Такие браузеры, как Chrome и Safari, поддерживают эллиптическое округление WebKit.
Мы можем использовать следующее сокращенное свойство для эллиптического округления всех углов.СИНТАКСИС
Пример
Только правые углы Чтобы эллиптически закруглить правые углы элементов, мы будем использовать следующий синтаксис: СИНТАКСИС
Пример
Мы можем использовать следующее сокращенное свойство для эллиптического округления всех углов.Используя следующие примеры, давайте научимся добавлять закругленные углы к элементам:
Примеры
Пример 1. В этом примере описывается свойство Border-Radius для создания закругленных углов Css
HTML
9000 8 УС
Вывод
Пример 2. В этом примере описывается использование свойства Border-Bottom-Left-Radius
HTML
CSS
900 04 ВыходПример 3. В этом примере описывается использование свойства Border-Top-Right-Radius 4
Пример 4: В этом примере описывается использование границы -Bottom-Right-Radius Property
HTML
CSS
Вывод
Пример 5.
В этом примере описывается использование Свойство Border-Top-Left-RadiusHTML
CSS
Вывод
Пример 6. В этом примере описывается использование сокращенных свойств
9 0004 HTMLCSS
Вывод
Пример 7. Мы можем научиться добавлять эллиптические углы с помощью этого примера
Заключение
- Мы можем использовать свойство border-radius, чтобы добавить закругленные углы CSS к любому элементу.
- Радиус границы можно указать в пикселях или процентах.
- Мы можем независимо указать радиус границы для каждого угла, используя свойства составляющих.
- Мы также можем использовать свойство border-radius для создания эллиптических границ.
- Это не обязательно, но мы можем добавить к свойству префикс «-webKit» и «-moz», чтобы обеспечить полную поддержку устаревшего браузера.
Закругленные углы на изображениях | IANR Media
Автор: Бекки Эйкен | МАНР Медиа
Свойство CSS border-radius добавляет закругленные углы к изображениям. Вы можете скруглить все углы изображения или просто выбрать углы, изменить радиус на разных углах или отобразить изображение в форме овала или круга.1. Добавьте изображение на свою страницу.
Нужна помощь со вставкой изображения?
2. Добавьте класс к своему изображению
Таким образом, ваши стили будут нацелены только на элементы с этим классом.
Примечание: Если вы используете систему сетки на своей странице и хотите, чтобы ваше изображение всегда занимало всю ширину столбца, в котором оно содержится, также добавьте класс dcf-w-100%
3. Стилизуйте углы.
Свойство CSS border-radius добавляет закругленные углы.
изображение с закругленными углами {
радиус границы: 30px;
}
Вот как это выглядит:
Вы можете поэкспериментировать с различными значениями, чтобы получить желаемое.
радиус границы: 5px; радиус границы: 50 пикселей; радиус границы: 75 пикселей; Если вы хотите, чтобы это был круг, добавьте border-radius: 50%; . Это сделает круг, только если вы начинаете с квадратного изображения.
радиус границы: 50%; радиус границы: 50%; Если вы хотите, чтобы разные углы вашего изображения были закруглены по-разному, их можно настроить по отдельности. В предыдущих примерах, когда вы объявляете одно значение для радиуса границы, оно применяется ко всем углам. Но вы можете перечислить четыре разных значения для разных углов.
1234 радиус границы: 10px 20px 30px 40px; Порядок номеров идет по часовой стрелке, начиная с верхнего левого угла: верхний левый, верхний правый, нижний правый, нижний левый.
Вот несколько примеров изображений с разными значениями радиуса границы для разных углов:
border-radius: 120px 20px 120px 20px; радиус границы: 40px 40px 0 0; радиус границы: 0 50% 50% 50%; 4.
