ПостЗабытые и неизведанные свойства

Забытые и неизведанные свойства Внезапно узнал, что оказывается существует ряд shape-* свойств, которые позволяют управлять формой обтекания при float вёрстке. 🍒 shape-outside — указывает тип формы Возможные значения: inset() — прямоугольник circle() — круг ellipse() — овал polygon() — любая другая форма, собранная по координатам url() — путь к изображению (если оно полупрозрачное, то форма образуется по прозрачным областям) content-box — форма рассчитывается от контентной части padding-box — форма рассчитывается от padding области border-box — форма рассчитывается от border области margin-box — форма рассчитывается от margin области Значения из первой и второй группы можно использовать как самостоятельно, так и со значением из другой группы в любом порядке, например: shape-outside: border-box; или shape-outside: circle(50%) border-box; или shape-outside: border-box circle(50%); 🍒 shape-margin — указывает отступ от элемента до отрисованной формы Возможные значения: единицы измерения (px, %, rem, ...) 🍒 shape-image-threshold — используется с полупрозрачными элементами и указывает от какой прозрачности пикселей будет выстраиваться форма Возможные значения: числа от 0 до 1 или проценты от 0% до 100%, где 0 означает, что форма будет выстроена по всем пикселям, кроме полностью прозрачных, а 1, что форма будет выстроена по всем пикселям, кроме частично прозрачных ⚙️ Поддержка браузерами широкая (shape-outside, shape-margin, shape-image-threshold)