Граница-граница - 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: устанавливает границу, в которой пересекаются область элемента и границы области просмотра.