Від автора: всі ми застосовували у своєму дизайні border-radius для заокруглення кутів зображень, div ів, nav’ів і т. д… Але чи помічали ви, що відбувається, коли до елементу з радіусом додається товста рамка?
Як відомо з моєї статті Заглиблюємося в CSS, закруглені кути в border-radius формуються з радіуса чверті кола.
Четверті частини кожного кола формують закруглені кути елемента.
Коли об’єднуються товсті рамки
При об’єднанні border-radius з широким border-width виникає невелика проблемка. У наступного зображення, наприклад, значення радіуса дорівнює двом значенням товщини рамки.
.mike {
border-radius: 12px;
border: 6px solid crimson;
}
Поки немає проблем.
Але якщо встановити значення border-width більше border-radius, ми втратимо округлені кути – нашого краю зображення стануть квадратними.
.mike {
border-radius: 12px;
border: 14px solid crimson;
}
Рамка стає ширше, а кути зображення – квадратними.
Чому так відбувається?
Це з-за того, що насправді border-radius надає форму зовнішньої частини рамки — не внутрішньою. Обрис внутрішнього радіуса визначається значенням border-radius мінус товщина рамки. Це відбивається на внутрішньому радіусі, який зазвичай менше зовнішнього.
Так що, якщо значення ширини рамки border-width більше border-radius, ми бачимо ефект чверті радіусу, що з’єднує дві рамки, які товщі самого радіуса. Зверніть увагу на квадратний внутрішній радіус:
Щоб обидва радіусу були пропорційними, нам знадобиться підігнати значення радіуса приблизно до подвійній ширині рамки, або сумі ширини border-width і радіусу рамки border-radius.
.mike {
border-radius: 26px;
border: 14px solid crimson;
}
При зміні значення border-radius до 26px ми отримуємо назад свої закруглені кути зображення.
Метод Box-shadow
При утворенні тіні блоку тінь слід за радіусом рамки елемента. Пам’ятаючи про це, можна використовувати значення додаткового розширення box-shadow для створення того, що виглядає в точності як рамка.
Розширений радіус встановлює розтягнутий інтервал тіні блоку. Якщо встановити офсети і розмиття на 0, певне значення розширення сформує навколо елемента чітку рамку.
.mike {
border-radius: 12px;
box-shadow: 0 0 0 14px crimson;
}
Результат виглядає в точності як приклад зі стилем рамки. Але тепер нам не потрібно турбуватися про зростання border-radius кожен раз при збільшенні ширини рамки, тому що розширене значення піде за радіусом.
Застосування змінних Sass
Якщо ми використовуємо препроцесор типу Sass, то для ширини та радіусу рамки можна створити змінні, потім застосувати просту математичну операцію, яка пропорційно сформує радіус.
$border-width: 14px;
$radius: $border-width*1.9;
.mike {
border: $border-width solid crimson;
border-radius: $radius;
}
Висновок
Повинен попередити вас щодо зазначеного тут методу box-shadow. Так як тіні блоку не є частиною блочної моделі елемента, фальшиві рамки перекривають частини інших вбудованих чи «плавають» елементів, тому знадобиться компенсувати їх за допомогою додаткових полів. Тіні блоку CSS підтримуються у всіх останніх браузерах, включаючи IE9+.
