Как выглядит Web-страница изнутри _ #2 - Видеоуроки по HTML и CSS.mp4
Расстояние между штрихами 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("путь_к_картинке...
Чем отличается box-sizing: border-box от content-box?
В 1996 году W3C в спецификации CSS предложил модель, в которой ширина элемента — это ширина его content-области.
Пограничные случаи этой модели начали сыпаться уже к 2002-му:
— дизайнер просит блок шириной 300px с 10px padding и 1px border;
— вы пишете width: 300px; padding: 10px; border: 1px solid;
— браузер выдаёт блок шириной 322px и ломает макет. Это не баг — это content-box в действии.
А border-box — это патч, который выправляет поведение. Давайте разберёмся детально. Что происходит внутри?
—...