Кордон-кордон - CSS-хитрощі

border-boundaryВластивість в набір CSS обмежень в межах елемента , який впливає як межі елементу поводяться. Це визначено в специфікації CSS Round Display Level 1, яка наразі перебуває у стані робочого проекту. Це означає, що від теперішнього часу до офіційної рекомендації кандидата все може змінитися.

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

Той факт, що ця властивість живе у специфікації CSS Round Display, вже говорить вам, у чому вона хороша: створення кругових інтерфейсів. Більш конкретно, border-boundaryпідпадає під розділ «Нанесення меж навколо межі дисплея», що є ще одним ключем до того, що він робить добре: дозволяючи межам елемента поважати круглу межу кругових інтерфейсів.

Уявіть, якщо хочете, розумний годинник з круглим екраном. Скажімо, екран становить 150 пікселів. А в ній - помаранчева коробка, однакових розмірів.

Нічого, божевільний, правда? Помаранчева коробка відповідає округлому дисплею, оскільки переповнює краї, які приховані. Але подивіться, що відбувається, коли до вікна додається рамка ...

Хм, не так здорово. Знову ж таки, краї вікна переповнюють круглий дисплей, тому наша межа обрізається в процесі.

Ось де це border-boundaryвписується в картину. Додавання його до вікна зі значенням displayдозволяє кордону вікна слідувати круглої форми дисплея. Оскільки підтримка веб-переглядача власності на даний момент є абсолютно невдалою, дозвольте мені запропонувати макетний візуальний результат запланованого результату.

Бачиш це? Кордон поважає круглу форму дисплея, запобігаючи його посіканню.

Ви можете собі уявити, наскільки це може бути корисно, коли справа стосується проектування годинників з інтерфейсами. Робоча група CSS склала перелік можливих випадків використання, які border-boundaryдійсно можуть стати в нагоді.

Синтаксис

border-boundary: none | parent | display;

Початкове значення: none
Застосовується до: усіх елементів
Успадковано: так
Відсотки: н / д
Обчислене значення: як вказано
Тип анімації: дискретна

Цінності

none: на кордоні не встановлено межу.
parent: встановлює межу, де стикаються область елемента та межі його батьківського елемента.
display: встановлює межу, де стикаються область елемента та межі країв області перегляду.