Главная » Языки программирования

Css div закруглить края

Содержание
  1. Скругление углов блока в CSS
  2. Скругление отдельных углов
  3. Краткая запись
  4. Скругление в виде эллипса
  5. Скругление в процентах
  6. Создаем закруглённые уголки с помощью CSS 3
  7. Кроссбраузерная совместимость.
  8. Добавляем свойство border-radius:
  9. Объявляем свойство border-radius для каждого угла
  10. Горизонтальный и вертикальный радиус
  11. Использование свойства border-radius в Safari и Chrome.
  12. Горизонтальный и вертикальный радиус в Safari и Chrome.
  13. border — radius
  14. Пример
  15. Как понять
  16. Как пишется
  17. Подсказки
  18. На практике
  19. Realetive советует
  20. Алёна Батицкая советует

Скругление углов блока в CSS

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius . В значении указывается радиус скругления в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

Блок со скруглёнными углами

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

Блок с отдельными скруглёнными углами

Краткая запись

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

  • Сначала идёт верхний левый угол
  • затем верхний правый
  • затем нижний правый
  • затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

Скругление всех углов по отдельности

Скругление в виде эллипса

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

Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так:

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

Скругление в виде эллипса

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:

Такой блок создаётся очень просто. Для его создания нужно:

  1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
  2. Задать фон блока.
  3. Установить скругление всех углов 50 процентов.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены

Источник

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

image

Одно из наиболее ожидаемых свойств 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.

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

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

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

image

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

Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box -moz-border-radius:20px 40px;
>

image

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

image

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

image

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

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

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

image

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#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;
>

image

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

  • -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;
>

Источник

border — radius

Свойство border — radius закругляет углы почти у любого элемента. И даже если у блока не задана явная рамка.

🔮 Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.

Пример

Скопировать ссылку «Пример» Скопировано

Самая простая штука — кнопка с закруглёнными краями:

  button class="btn">Купитьbutton>      
 .btn  border: none; border-radius: 5px;> .btn  border: none; border-radius: 5px; >

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

Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет «нажиматься» — получится привлекательно и современно 😉

 body  background-color: #e6e6e6;> .btn:focus  box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s;> body  background-color: #e6e6e6; > .btn:focus  box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство border — radius задаёт радиус закругления каждого из углов элемента.

Если значение задано в процентах, то оно будет высчитываться от размеров элемента: горизонтальные размеры будут высчитываться от ширины элемента, а вертикальные — соответственно, от высоты (поэтому для квадратного элемента можно задать border — radius : 50 % , чтобы сделать его круглым).

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 div  /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%;> div  /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%; >

Можно управлять степенью закругления каждого из углов в отдельности или задать одно значение для всех углов сразу. Причём значение на самом деле состоит из двух — скругления по горизонтальной оси и по вертикальной. Чтобы явно задать скругление для каждой из осей (т. е. получить не круглое значение, а эллипсоидное), это значение следует записывать через символ / :

 .ellipse  border-radius: 5em / 50%;> .ellipse  border-radius: 5em / 50%; >

Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:

 .ellipse  border-top-left-radius: 5em 50%; border-top-right-radius: 5em 50%; border-bottom-right-radius: 5em 50%; border-bottom-left-radius: 5em 50%;> .ellipse  border-top-left-radius: 5em 50%; border-top-right-radius: 5em 50%; border-bottom-right-radius: 5em 50%; border-bottom-left-radius: 5em 50%; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 border — radius сработает даже если не будет задана видимая рамка.

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

💡 Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:

  • border — top — left — radius — радиус закругления для левого верхнего угла.
  • border — top — right — radius — радиус закругления для правого верхнего угла.
  • border — bottom — right — radius — радиус закругления для правого нижнего угла.
  • border — bottom — left — radius — радиус закругления для левого нижнего угла.

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, border — radius : 9999px . Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Самый крутой лайфхак — это круглые элементы при помощи border — radius . Они часто нужны для всяких лейблов на странице.

 button class="icon" data-notifications="3">button>      
 .icon  background-image: url(eyes.png);> .icon::after  content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242;> .icon  background-image: url(eyes.png); > .icon::after  content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242; >

Источник

Читайте также:  Python вывести числа фибоначчи
Оцените статью
© 2024 Программирование