CSS анимация Круг HTML, синий круг, синий, текст, логотип png
CSS анимация Круг HTML, синий круг, синий, текст, логотип pngтеги
- синий,
- текст,
- логотип,
- компьютерные обои,
- сфера,
- холст,
- мультфильм,
- обои для рабочего стола,
- электрический Синий,
- конечная,
- небо,
- круги,
- точка,
- начальная,
- линия,
- javaScript,
- область,
- лазурь,
- бренд,
- каскадные таблицы стилей,
- круг,
- диаграмма,
- анимация,
- синий круг,
- CSS анимация,
- HTML,
- png,
- прозрачный,
- бесплатная загрузка
Об этом PNG
- Размер изображения
- 2300x1818px
- Размер файла
- 44.72KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Лицензия
Некоммерческое использование, DMCA Contact Us
- org/ImageGallery» align=»middle»>
- CSS3 Каскадные таблицы стилей Логотип HTML Язык разметки, другие, разное, синий, угол png 1270x1500px 74.36KB
- Веб-разработка Каскадные таблицы стилей CSS3 Computer Icons, css, разное, синий, угол png 1400x1400px 51.23KB
- Веб-разработка Каскадные таблицы стилей CSS3 HTML, всемирная паутина, синий, угол, веб-дизайн png 980x980px 46.63KB
Логотип каскадных таблиц стилей HTML5 и CSS3 (Prags) HTML5 и CSS3: Der Meisterkurs HTML5, CSS3, JavaScript, дизайн, текст, товарный знак, логотип png 1472x880px 31.41KB- HTML, JS и CSS логотип, каскадные таблицы стилей JavaScript HTML CSS3 jQuery, логотип, Разное, текст, товарный знак png
3960x1500px
186.
51KB
- Логотип JavaScript HTML, логотип JavaScript, угол, текст, прямоугольник png 540x540px 43.58KB
- Адаптивный веб-дизайн Веб-разработка Каскадные таблицы стилей CSS3, веб-дизайн, синий, угол, веб-дизайн png 800x800px 54.47KB
- Веб-разработка HTML Logo Консорциум World Wide Web, создание подписи HTML, угол, текст, прямоугольник png 2000x2000px 68.86KB
- HTML & CSS: разработка и создание веб-сайтов. Веб-разработка. Каскадные таблицы стилей, всемирная сеть, веб-дизайн, текст, логотип png 500x500px 36.87KB
- синяя и бирюзовая рамка, градиентные волнистые линии, синий, угол, текст png
2136x3982px
274.
07KB
- Адаптивный веб-дизайн Bootstrap Sass Каскадные таблицы стилей HTML, Framework, фиолетовый, шаблон, веб-дизайн png 1024x860px 50.94KB
- CSS3 каскадные таблицы стилей логотип HTML, украсить, синий, угол, текст png 528x528px 12.83KB
- бело-синий логотип в виде щита, CSS3 каскадные таблицы стилей Компьютерные иконки HTML, эмблема, Разное, синий, угол png 1600x1600px 38.88KB
- Цвет градиента рабочего стола, фон, Разное, синий, атмосфера png 1920x1200px 3.22MB
- синий и белый логотип, веб-разработка, адаптивный веб-дизайн, каскадные таблицы стилей HTML, CSS, синий, угол, текст png
512x512px
13.
- Логотип каскадных таблиц стилей CSS3 HTML Веб-разработка, всемирная сеть, синий, угол, веб-дизайн png 1000x1123px 19.45KB
- Логотип Disney Frozen, Эльза Анна Олаф Кристофф, Frozen, синий, текст, логотип png 1280x958px 869.93KB
- Каскадные таблицы стилей CSS3 JavaScript Logo, всемирная паутина, синий, угол, текст png 512x512px 17.48KB
Веб-разработка HTML & CSS: дизайн и создание веб-сайтов Каскадные таблицы стилей, всемирная сеть, синий, веб-дизайн, текст png 1201x722px 139.33KB- Синие евклидовы, большие волны синие линии фон, синие произведения искусства, синий, угол, текст png
1513x1107px
1.
24MB
- Синий компьютерный файл, синий фон, текстура, угол, компьютер обои png 2953x4724px 7.76MB
- Вспышка линзы Оптика Объектив камеры, световая вспышка, синий, объектив, атмосфера png 969x538px 184.01KB
- Sass npm Каскадные таблицы стилей Node.js, sass, фиолетовый, текст, логотип png 660x660px 11.27KB
- JavaScript Node.js AngularJS jQuery, Github, угол, текст, прямоугольник png 800x1129px 17.05KB
- org/ImageObject»> Ajax jQuery JavaScript HTML Bootstrap, Ajax, текст, товарный знак, другие png 600x600px 9.58KB
- Адаптивный веб-дизайн Веб-разработка Bootstrap Cascading Style Sheets Веб-браузер, всемирная паутина, фиолетовый, веб-дизайн, текст png 558x558px 3.01KB
- круглый синий круг, масштабируемая графика загрузчика значков компьютера, загрузка, разное, синий, угол png 500x500px 39.54KB
- Веб-разработка HTML Каскадные таблицы стилей CSS3 JavaScript, JavaScript Html CSS3, веб-дизайн, текст, логотип png
500x500px
13.
44KB
- Логотип Instagram, логотип Computer Computer Icons, логотип INSTAGRAM, Разное, белый, текст png 1224x792px 22.92KB
- Веб-разработка Каскадные таблицы стилей HTML PHP MySQL, всемирная паутина, текст, логотип, веб-приложение png 2000x2000px 122.76KB
- Каскадные таблицы стилей HTML Веб-разработка JavaScript Веб-браузер, против, разное, синий, текст png 3198x1874px 134.55KB
- Mount Fuji, Япония Веб-дизайн HTML, Японский фон, текст, треугольник, компьютерные обои png
1460x716px
452.
24KB
- PHP MySQL jQuery JavaScript HTML, веб-дизайн, веб-дизайн, текст, компьютер png 900x350px 128.45KB
- синий инсульт, Pincelada Живопись Цвет, Pinceladas, синий, текст, облако png 990x343px 280KB
- HTML Компьютерные иконки, всемирная паутина, текст, логотип, знак png 512x512px 42.95KB
- JavaScript Логотип Комментарий HTML Язык разметки, analitycs, угол, текст, прямоугольник png 1227x1500px 61.69KB
- Веб-разработка Адаптивный веб-дизайн Каскадные таблицы стилей HTML, веб-дизайн, синий, веб-дизайн, текст png 832x581px 40.02KB
- org/ImageObject»> Иллюстрация пузырей, Голубое Небо, Плавающая Голубая точка, фиолетовый, синий, текст png 1244x924px 84.39KB
- иллюстрация молнии, Молния Компьютерный файл, молния, синий, угол, белый png 658x571px 144.31KB
- JavaScript Компьютер Иконки Разработчик программного обеспечения Каскадные таблицы стилей, javascript logo, угол, текст, прямоугольник png 526x741px 36.41KB
- анимированные солнечные лучи, атмосфера голубого неба, световой эффект красивого ночного неба, фиолетовый, текстура, синий png 650x650px 845.9KB
- сине-серебристая графика, марка Blue, полукруг, фиолетовый, угол, текст png 1063x591px 462.4KB
- org/ImageObject»> Light Lens flare Рабочий стол, бликовая линза, синий, объектив, объектив камеры png 1920x1481px 288.73KB
- Название компании логотип, синий фон с волнистыми линиями, синий, угол, текст png 900x900px 261.74KB
- Дуга Плакат, Голубая технология дуги границы, синий и желтый фон, рамка, угол, текст png 3685x3846px 4.96MB
- синий абстрактный, синий, синий фон материала решетки, угол, затенение, симметрия png 1217x3368px 1.24MB
- Анимация рисования неба, Анимация нарисовал небо, небо, Акварельная живопись, синий, животные png 1000x600px 648.18KB
абсолютные и относительные — Основы CSS — HTML Academy
Загрузка…
Через несколько секунд всё будет готово
- index.
html
- style.css
HTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<h2>Сайт начинающего верстальщика</h2>
</header>
<main>
<!— Измените ширину у картинки ниже —>
<img src=»img/raccoon.svg» alt=»Аватарка»>
<nav>
<h3>Записи в блоге</h3>
<ul>
<li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li>
<li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li>
<li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li>
<li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li>
<li><a href=»day-5.html»>День пятый. Отдыхаю</a></li>
<li><a href=»day-6.html»>День шестой. Как я ничего не понял</a></li>
<li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li>
<li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li>
<li><a href=»day-9.html»>День девятый. Точнее ночь</a></li>
<li><a href=»day-10.html»>День десятый. Подведение итогов</a></li>
<li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li>
<li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li>
<li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li>
<li><a href=»day-14.html»>День четырнадцатый.
Новый формат</a></li>
<li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li>
</ul>
</nav>
<section>
<p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p>
<p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p>
</section>
<section>
Раздел про навыки
</section>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
CSS
body {
padding: 0 30px;
font-size: 16px;
line-height: 26px;
font-family: «Arial», sans-serif;
color: #222222;
background: #ffffff url(«img/bg-page. png») no-repeat top center;
}
h2 {
font-size: 36px;
line-height: normal;
}
h3 {
font-size: 20px;
line-height: normal;
}
a {
color: #0099ef;
text-decoration: underline;
}
/* Поменяйте значение в правиле ниже */
.avatar {
border-radius: 10px;
}
nav {
margin-bottom: 30px;
padding: 20px;
background-color: #4470c4;
border: 5px solid #2d508f;
color: #ffffff;
}
nav a {
color: #ffffff;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
margin-top: 30px;
}
Что в задании вам не понравилось?
Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)
Другое (сейчас напишу)
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
- В правиле
.avatar
поменяйте значениеborder-radius
на40px
, - затем в разметке у картинки
.
измените значение атрибутаavatar
width
на160
. - Для
.avatar
снова поменяйте значениеborder-radius
на50%
, - а затем верните изначальную ширину
80
картинке в разметке.
Использование свойства CSS Border Radius для создания круга
- Категория сообщения: CSS
Использование свойства CSS Border Radius для создания круга
- Введение
- Что такое радиус границы CSS
- Создать круг
- Четверть круга и полукруг
- Значения радиуса границы
- Заключение
Введение:
Это одно из свойств стиля в CSS, которое помогает настроить кривые вашего изображения или границы. Это в основном для привлечения клиентов и стильного. Это отличное мощное свойство радиуса границы CSS, но иногда его синтаксис может немного сбивать с толку. Мы знаем, что каждый элемент HTML занимает прямоугольную рамку в окне браузера. Вы можете заметить, что углы прямые.
Что такое радиус границы CSS:
Если вы хотите создать элемент HTML со скругленными углами, воспользуйтесь свойствами радиуса границы CSS. Свойство border-radius позволяет мне скруглять углы. Выберите любое число, которое будет использоваться для всех четырех углов. Он был создан в основном для привлечения клиентов и стильного. Если вы хотите коробку с закругленными углами без острых краев, используйте радиус границы. Коробка имеет четыре угла: верхний левый, верхний правый, нижний левый и нижний правый. Он может нацеливаться на все четыре по отдельности. радиус границы может быть упомянут отдельно, как и свойство границы может быть упомянуто отдельно.
При установке радиуса границы на одно значение. Все углы будут округлены на одно и то же значение. Если это статическое значение, такое как пиксель, вы всегда получите симметричный угол. Но если это проценты, радиус будет основан на ширине и высоте элемента. Вы также можете использовать специальные свойства угла, такие как граница вверху справа, они эквивалентны, но длиннее для ввода. По умолчанию border-radius будет применять одно и то же значение как к горизонтальному, так и к вертикальному радиусу, но вы также можете добавить косую черту к значению, чтобы управлять ими отдельно. Пример: border-radius: 100px/150px. Мы можем добавить до восьми значений с косой чертой, чтобы создать полную форму. Используя инструменты Mirko и Nils, чтобы упростить задачу, вы можете просто щелкнуть и перетащить каждую точку для управления. Большинство людей используют радиус границы для кнопок и изображений.
У нас есть элемент Div с определенной высотой и шириной, и мы хотели бы стилизовать его угол. Мы можем сделать это с помощью свойства радиуса границы, которое позволяет нам добавить закругленный угол к любому элементу.
Создать круг
Круг { ширина: 200 пикселей; высота: 200 пикселей; цвет фона: красный; радиус границы: 50%; отступ: 20 пикселей; граница: сплошная черная 10px; поле: 20 пикселей; }
Со свойством радиуса границы только для этого нам нужно дать здесь более сильное значение, на самом деле на этот раз давайте определим другую единицу вместо пикселей, мы можем использовать процент. Когда мы даем минимальное значение 50% или даже больше, оно полностью скругляет углы со всех сторон. Если мы хотим иметь овальную форму, мы можем увеличить высоту или ширину элемента. Одно единственное значение свойства радиуса границы скругляет все углы элементов.
Но на самом деле их также можно добавлять по одному для каждого угла, для этого также есть сокращение. Сначала позвольте мне показать вам обычную скорость, поэтому, скажем, мы хотим, чтобы это делали только верхние левые углы, поэтому давайте сначала удалим это. Нам нужно выбрать свойство (граница-верхний-левый-радиус) и снова на 50%, что округляет только верхний левый угол поля.
Четверть круга и полукруг
Четверть круга :
.Четверть круга { ширина: 300 пикселей; высота: 300 пикселей; цвет фона: красный; граница-верхний-левый-радиус: 100%; граница-верхний-правый-радиус: 0; граница-нижний-левый-радиус: 0; граница-нижний-правый-радиус: 0; }
Полукруг :
.Полукруг { ширина: 600 пикселей; высота: 300 пикселей; цвет фона: красный; граница-верхний-левый-радиус: 50% 100%; граница-верхний-правый-радиус: 50% 100%; граница-нижний-левый-радиус: 0; граница-нижний-правый-радиус: 0; }
И вы можете легко создать полукруг и четверть круга, используя это свойство. Лучший способ написать код здесь. Сначала мы можем с помощью простых методов кода создать четверть круга. Эти значения ширины и высоты должны соответствовать одному и тому же значению, вы не можете увеличивать или уменьшать значение радиуса верхнего левого края границы, его точное значение равно 100%. Радиус остальных трех углов равен 0. Запустите этот код, и вы увидите, что создается четверть круга.
Далее идет полукруг, он создается для выполнения следующих шагов: Значение высоты должно быть вдвое меньше значения ширины. Радиус верхней левой и правой границы должен составлять 50% 100%. На самом деле это означает, что горизонтальный радиус должен составлять 50% от ширины и будет составлять 600 на два 300. Здесь 100% означает вертикальный радиус. Вы знаете, что горизонтальный радиус имеет разные значения. Если вы сохраните одно единственное значение, это означает, что вы хотели бы, чтобы они оба были одинаковыми. Единственное значение 50% означает горизонтальный радиус по вертикали. В этом случае 50% от 600 составляет 300. У меня были проценты роста 300 и 300.
Значения радиуса границы:
.values{ радиус границы: 20px 50% 0 50%; }
Существуют также другие свойства для верхнего правого, нижнего правого и нижнего левого угла. Но определение их здесь по одному заполняет наш класс множеством ненужных текстов. Итак, теперь мы можем использовать его короткий конец, если снова определим свойство радиуса границы. Мы можем определить четыре значения для каждого из углов, первое значение равно 20px для верхнего левого угла. Второй для верхнего правого угла составляет 50%, затем идет нижний правый угол, давайте сделаем его равным нулю, и последний для нижнего левого угла, давайте также сделаем его 50%. Теперь вы можете запустить с помощью любого редактора кода, вы можете видеть, что верхний левый угол слегка закруглен, верхний правый и нижний левый округлены до максимального значения, а нижний правый угол — третье значение здесь не округлено.
Заключение:
Свойство CSS «Радиус границы» дает хорошую гибкость при стилизации элементов в форме прямоугольника в виде кругов, овалов и других форм. Ребята, если вы хотите узнать больше о CSS и веб-разработке, поддержите мой сайт.
Радиус границы — попутный ветер CSS
округлено-нет | радиус границы: 0px; |
округло-см | граница-радиус: 0,125 бэр; /* 2 пикселя */ |
закругленный | радиус границы: 0,25 бэр; /* 4 пикселя */ |
закругленный md | радиус границы: 0,375 бэр; /* 6 пикселей */ |
закругленный-lg | радиус границы: 0,5 бэр; /* 8 пикселей */ |
округлый-xl | радиус границы: 0,75 бэр; /* 12 пикселей */ |
закругленный-2xl | радиус закругления: 1 бэр; /* 16 пикселей */ |
закругленный-3xl | радиус границы: 1,5 бэр; /* 24 пикселя */ |
закругленный-полный | радиус границы: 9999px; |
rounded-s-none | border-start-start-radius: 0px; граница-конец-начало-радиус: 0px; |
закругленный-s-sm | граница-начало-начало-радиус: 0,125 бэр; /* 2 пикселя */ граница-конец-начало-радиус: 0,125 бэр; /* 2 пикселя */ |
rounded-s | border-start-start-radius: 0.![]() |
rounded-s-md | border-start-start-radius: 0.375rem; /* 6 пикселей */ граница-конец-начало-радиус: 0,375 бэр; /* 6 пикселей */ |
rounded-s-lg | border-start-start-radius: 0.5rem; /* 8 пикселей */ граница-конец-начало-радиус: 0,5 бэр; /* 8 пикселей */ |
rounded-s-xl | border-start-start-radius: 0,75 бэр; /* 12 пикселей */ граница-конец-начало-радиус: 0,75 бэр; /* 12 пикселей */ |
rounded-s-2xl | border-start-start-radius: 1rem; /* 16 пикселей */ граница-конец-начало-радиус: 1rem; /* 16 пикселей */ |
rounded-s-3xl | border-start-start-radius: 1.5rem; /* 24 пикселя */ граница-конец-начало-радиус: 1,5 бэр; /* 24 пикселя */ |
rounded-s-full | border-start-start-radius: 9999px; радиус конца-начала границы: 9999 пикселей; |
округлен-е-нет | граница-начало-конец-радиус: 0px; граница-конец-конец-радиус: 0px; |
округлый-e-sm | граница-начало-конец-радиус: 0,125 бэр; /* 2 пикселя */ граница-конец-конец-радиус: 0,125 бэр; /* 2 пикселя */ |
закругленный-e | граница-начало-конец-радиус: 0,25 бэр; /* 4 пикселя */ граница-конец-конец-радиус: 0,25 бэр; /* 4 пикселя */ |
rounded-e-md | border-start-end-radius: 0.![]() |
закругленный-e-lg | граница-начало-конец-радиус: 0,5 бэр; /* 8 пикселей */ граница-конец-конец-радиус: 0,5 бэр; /* 8 пикселей */ |
rounded-e-xl | border-start-end-radius: 0.75rem; /* 12 пикселей */ граница-конец-конец-радиус: 0,75 бэр; /* 12 пикселей */ |
rounded-e-2xl | border-start-end-radius: 1rem; /* 16 пикселей */ граница-конец-конец-радиус: 1rem; /* 16 пикселей */ |
rounded-e-3xl | border-start-end-radius: 1.5rem; /* 24 пикселя */ граница-конец-конец-радиус: 1,5 бэр; /* 24 пикселя */ |
закругленный-и-полный | граница-начало-конец-радиус: 9999px; граница-конец-конец-радиус: 9999px; |
rounded-t-none | border-top-left-radius: 0px; граница-верхний-правый-радиус: 0px; |
закругленный-т-см | граница-вверх-влево-радиус: 0,125 бэр; /* 2 пикселя */ радиус верхней правой границы: 0,125 бэр; /* 2 пикселя */ |
закругленный-t | граница-верхний-левый-радиус: 0,25 бэр; /* 4 пикселя */ радиус верхней правой границы: 0,25 бэр; /* 4 пикселя */ |
закругленный-t-md | граница-верхний-левый-радиус: 0,375 бэр; /* 6 пикселей */ радиус верхней правой границы: 0,375 бэр; /* 6 пикселей */ |
закругленный-t-lg | граница-верхний-левый-радиус: 0,5 бэр; /* 8 пикселей */ радиус верхней правой границы: 0,5 бэр; /* 8 пикселей */ |
закругленный-t-xl | граница-верхний-левый-радиус: 0,75 бэр; /* 12 пикселей */ радиус верхней правой границы: 0,75 бэр; /* 12 пикселей */ |
rounded-t-2xl | граница-вверху-влево-радиус: 1rem; /* 16 пикселей */ радиус верхней правой границы: 1rem; /* 16 пикселей */ |
закругленный-t-3xl | граница-верхний-левый-радиус: 1,5 бэр; /* 24 пикселя */ радиус верхней правой границы: 1,5 бэр; /* 24 пикселя */ |
закругленный-t-полный | граница-верхний-левый-радиус: 9999 пикселей; радиус верхнего правого края: 9999 пикселей; |
закругленный-r-нет | граница-верхний-правый-радиус: 0px; граница-нижний-правый-радиус: 0px; |
закругленный-r-sm | граница-вверху-справа-радиус: 0,125 бэр; /* 2 пикселя */ радиус нижнего правого края: 0,125 бэр; /* 2 пикселя */ |
закругленный-r | граница-вверху-справа-радиус: 0,25 бэр; /* 4 пикселя */ радиус нижнего правого края: 0,25 бэр; /* 4 пикселя */ |
закругленный-r-md | граница-вверху-справа-радиус: 0,375 бэр; /* 6 пикселей */ радиус нижнего правого края: 0,375 бэр; /* 6 пикселей */ |
закругленный-r-lg | граница-вверху-справа-радиус: 0,5 бэр; /* 8 пикселей */ радиус нижнего правого края: 0,5 бэр; /* 8 пикселей */ |
закругленный-r-xl | граница-вверху-справа-радиус: 0,75 бэр; /* 12 пикселей */ радиус нижнего правого края: 0,75 бэр; /* 12 пикселей */ |
закругленный-r-2xl | бордюр-вверху-справа-радиус: 1 бэр; /* 16 пикселей */ граница-нижний-правый-радиус: 1rem; /* 16 пикселей */ |
закругленный-r-3xl | бордюр-вверху-справа-радиус: 1,5 бэр; /* 24 пикселя */ радиус нижнего правого края: 1,5 бэр; /* 24 пикселя */ |
закругленный-r-полный | граница-верхний-правый-радиус: 9999px; граница-нижний-правый-радиус: 9999px; |
закругленный-b-нет | граница-нижний-правый-радиус: 0px; граница-нижний-левый-радиус: 0px; |
закругленный-б-см | граница-нижняя-правая-радиус: 0,125 бэр; /* 2 пикселя */ радиус нижнего левого края: 0,125 бэр; /* 2 пикселя */ |
закругленный-b | граница-нижняя-правая-радиус: 0,25 бэр; /* 4 пикселя */ радиус нижнего левого края: 0,25 бэр; /* 4 пикселя */ |
закругленный-b-md | граница-нижняя-правая-радиус: 0,375 бэр; /* 6 пикселей */ граница-нижний-левый-радиус: 0,375 бэр; /* 6 пикселей */ |
закругленный-b-lg | граница-нижняя-правая-радиус: 0,5 бэр; /* 8 пикселей */ радиус нижнего левого края: 0,5 бэр; /* 8 пикселей */ |
закругленный-b-xl | граница-внизу-справа-радиус: 0,75 бэр; /* 12 пикселей */ граница-нижний-левый-радиус: 0,75 бэр; /* 12 пикселей */ |
rounded-b-2xl | граница-нижняя-правая-радиус: 1rem; /* 16 пикселей */ граница-нижний-левый-радиус: 1rem; /* 16 пикселей */ |
rounded-b-3xl | граница-нижняя-правая-радиус: 1,5 бэр; /* 24 пикселя */ радиус нижнего левого края: 1,5 бэр; /* 24 пикселя */ |
закругленный-b-полный | граница-внизу-справа-радиус: 9999px; радиус нижнего левого края: 9999 пикселей; |
rounded-l-none | border-top-left-radius: 0px; граница-нижний-левый-радиус: 0px; |
закругленный-l-sm | граница-верхний-левый-радиус: 0,125 бэр; /* 2 пикселя */ радиус нижнего левого края: 0,125 бэр; /* 2 пикселя */ |
закругленный-l | граница-вверх-влево-радиус: 0,25 бэр; /* 4 пикселя */ радиус нижнего левого края: 0,25 бэр; /* 4 пикселя */ |
закругленный-l-md | граница-верхний-левый-радиус: 0,375 бэр; /* 6 пикселей */ граница-нижний-левый-радиус: 0,375 бэр; /* 6 пикселей */ |
закругленный-l-lg | граница-верхний-левый-радиус: 0,5 бэр; /* 8 пикселей */ радиус нижнего левого края: 0,5 бэр; /* 8 пикселей */ |
закругленный-l-xl | граница-верхний-левый-радиус: 0,75 бэр; /* 12 пикселей */ граница-нижний-левый-радиус: 0,75 бэр; /* 12 пикселей */ |
закругленный-l-2xl | граница-верхний-левый-радиус: 1rem; /* 16 пикселей */ граница-нижний-левый-радиус: 1rem; /* 16 пикселей */ |
закругленный-l-3xl | граница-верхний-левый-радиус: 1,5 бэр; /* 24 пикселя */ радиус нижнего левого края: 1,5 бэр; /* 24 пикселя */ |
закругленный-l-полный | граница-верхний-левый-радиус: 9999px; радиус нижнего левого края: 9999 пикселей; |
rounded-ss-none | border-start-start-radius: 0px; |
rounded-ss-sm | border-start-start-radius: 0.![]() |
закругленный-сс | граница-начало-начало-радиус: 0,25 бэр; /* 4 пикселя */ |
rounded-ss-md | border-start-start-radius: 0.375rem; /* 6 пикселей */ |
rounded-ss-lg | border-start-start-radius: 0.5rem; /* 8 пикселей */ |
rounded-ss-xl | border-start-start-radius: 0,75 бэр; /* 12 пикселей */ |
rounded-ss-2xl | border-start-start-radius: 1rem; /* 16 пикселей */ |
rounded-ss-3xl | border-start-start-radius: 1.5rem; /* 24 пикселя */ |
rounded-ss-full | border-start-start-radius: 9999px; |
rounded-se-none | border-start-end-radius: 0px; |
закругленный-се-см | граница-начало-конец-радиус: 0,125 бэр; /* 2 пикселя */ |
закругленный | граница-начало-конец-радиус: 0,25 бэр; /* 4 пикселя */ |
rounded-se-md | border-start-end-radius: 0.![]() |
округленный-se-lg | граница-начало-конец-радиус: 0,5 бэр; /* 8 пикселей */ |
rounded-se-xl | border-start-end-radius: 0.75rem; /* 12 пикселей */ |
rounded-se-2xl | border-start-end-radius: 1rem; /* 16 пикселей */ |
закругленный-se-3xl | граница-начало-конец-радиус: 1,5 бэр; /* 24 пикселя */ |
rounded-se-full | border-start-end-radius: 9999px; |
rounded-ee-none | border-end-end-radius: 0px; |
закругленный-ee-sm | граница-конец-конец-радиус: 0,125 бэр; /* 2 пикселя */ |
закругленный-ee | граница-конец-конец-радиус: 0,25 бэр; /* 4 пикселя */ |
округленный-ee-md | граница-конец-конец-радиус: 0,375 бэр; /* 6 пикселей */ |
закругленный-ee-lg | граница-конец-конец-радиус: 0,5 бэр; /* 8 пикселей */ |
округленный-ee-xl | граница-конец-конец-радиус: 0,75 бэр; /* 12 пикселей */ |
округленный-ee-2xl | граница-конец-конец-радиус: 1 бэр; /* 16 пикселей */ |
rounded-ee-3xl | граница-конец-конец-радиус: 1,5 бэр; /* 24 пикселя */ |
закругленный-ее-полный | граница-конец-конец-радиус: 9999px; |
округлено-es-нет | граница-конец-начало-радиус: 0px; |
rounded-es-sm | border-end-start-radius: 0.![]() |
закругленные-es | граница-конец-начало-радиус: 0,25 бэр; /* 4 пикселя */ |
rounded-es-md | border-end-start-radius: 0.375rem; /* 6 пикселей */ |
rounded-es-lg | border-end-start-radius: 0.5rem; /* 8 пикселей */ |
rounded-es-xl | border-end-start-radius: 0.75rem; /* 12 пикселей */ |
rounded-es-2xl | border-end-start-radius: 1rem; /* 16 пикселей */ |
rounded-es-3xl | border-end-start-radius: 1.5rem; /* 24 пикселя */ |
закругленный-es-полный | граница-конец-начало-радиус: 9999px; |
rounded-tl-none | border-top-left-radius: 0px; |
округленный-tl-sm | граница-верхний-левый-радиус: 0,125 бэр; /* 2 пикселя */ |
закругленный-TL | граница-верхний-левый-радиус: 0,25 бэр; /* 4 пикселя */ |
rounded-tl-md | border-top-left-radius: 0,375rem; /* 6 пикселей */ |
закругленный-tl-lg | граница-верхний-левый-радиус: 0,5 бэр; /* 8 пикселей */ |
rounded-tl-xl | граница-вверху-влево-радиус: 0,75 бэр; /* 12 пикселей */ |
rounded-tl-2xl | border-top-left-radius: 1rem; /* 16 пикселей */ |
rounded-tl-3xl | border-top-left-radius: 1.![]() |
округленный-tl-полный | граница-верхний-левый-радиус: 9999 пикселей; |
rounded-tr-none | border-top-right-radius: 0px; |
закругленный-тр-см | граница-вверху-справа-радиус: 0,125 бэр; /* 2 пикселя */ |
rounded-tr | border-top-right-radius: 0.25rem; /* 4 пикселя */ |
rounded-tr-md | border-top-right-radius: 0.375rem; /* 6 пикселей */ |
закругленный-tr-lg | граница-верхний-правый-радиус: 0,5 бэр; /* 8 пикселей */ |
rounded-tr-xl | border-top-right-radius: 0.75rem; /* 12 пикселей */ |
rounded-tr-2xl | border-top-right-radius: 1rem; /* 16 пикселей */ |
rounded-tr-3xl | border-top-right-radius: 1.![]() |