Граница-граница - ЦСС-трикови

Anonim

border-boundaryИмовина у КЦС постављених ограничења на границама елемент који утиче на то како су границе елемента понашају. Дефинисано је у спецификацији нивоа 1 ЦСС Роунд Дисплаи, која је тренутно у статусу Воркинг Драфт. То значи да се ствари могу променити од сада до формалне препоруке кандидата.

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

Чињеница да ово својство живи у спецификацији ЦСС Роунд Дисплаи већ вам говори у чему је добро: стварање кружних интерфејса. Још прецизније, border-boundaryспада у одељак „Цртање граница око границе приказа“ што је још један траг за оно што добро чини: омогућавање границама елемента да поштују округлу границу кружних интерфејса.

Замислите, ако желите, паметни сат са округлим екраном. Рецимо да је екран квадрат 150пк. А у њему је наранџаста кутија истих димензија.

Ништа, лудо, зар не? Наранџасти оквир се прилагођава заобљеном екрану јер прелива ивице које су скривене. Али погледајте шта се дешава када се у оквир дода ивица ...

Хмм, не баш сјајно. Опет, ивице оквира преливају округли екран, тако да се наша граница засече у процесу.

Ту се border-boundaryуклапа слика. Додавањем у оквир са вредношћу displayдозвољава да оквир оквира прати округли облик екрана. С обзиром да је подршка за прегледач имовине тренутно потпуно нетачна, дозволите ми да понудим изружени визуелни приказ жељеног резултата.

Погледај? Граница поштује округли облик екрана, спречавајући да се засече.

Можете да замислите колико би ово могло бити корисно када је у питању дизајнирање сатова са интерфејсима. ЦСС Радна група је саставила списак могућих случајева употребе који border-boundaryби заиста могли добро доћи.

Синтакса

border-boundary: none | parent | display;
  • Почетна вредност: none
  • Односи се на: све елементе
  • Наследио: да
  • Проценти: н / а
  • Израчуната вредност: како је наведено
  • Тип анимације: дискретна

Вредности

  • none: на граници није постављена граница.
  • parent: поставља границу где се спајају површина елемента и ивице његовог родитеља.
  • display: поставља границу где се спајају површина елемента и ивице оквира за приказ.

Подршка прегледача

Ниједан у време писања овог чланка.

Додатна литература

  • Спецификација ЦСС округлог екрана нивоа 1 (радни нацрт)
  • Примери округлог приказа (ЦСС Радна група Вики)
  • Спецификације ЦСС округлог екрана (01.орг)