Как закруглить края в css
7 месяцев назад
#css #tips #example #frontend Арка (неполная обводка круга) с закругленными краями Создание арки (неполной обводки круга) с закругленными краями с помощью нескольких строк CSS ✅ Одиночный элемент (без псевдоэлемента) ✅ Менее 10 объявлений CSS ✅ Поддерживает градиентное окрашивание ✅ Оптимизировано с помощью переменных CSS .arc { --b: 30px; /* the boder thickness */ --a: 220deg; /* control the progression */ width: 200px; aspect-ratio: 1; padding: var(--b); box-sizing: border-box; border-radius: 50%; background: linear-gradient(#CC333F,#8A9B0F); --_g:/var(--b) var(--b) no-repeat radial-gradient(50% 50%,#000 calc(100% - 1px),#0000); mask: top var(--_g), calc(50% + 50%*sin(var(--a))) calc(50% - 50%*cos(var(--a))) var(--_g), linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--a),#0000 0); } 👉 Пример на CodePen @dev-notes.ru
Расстояние между штрихами border, border с длинными штрихами и закругленными углами
Свойства css не поддерживают настройку расстояния между штрихами, но есть несколько вариантов как это обойти. 1 вариант: Берем картинку png такого вида картинка весит чуть более 100 байт. Цвет, прозрачность, длину и ширину промежутков можно изменить в фотошопе. Код: .border { border: dashed 2px #000; /* запасной вариант */ border-image-source: url("путь_к_картинке.png"); border-image-slice: 1; /* толщина бордера */ border-image-repeat: round; /* повторение изображения */ /* короткая запись border-image */ border-image: url("путь_к_картинке...