Hranice-hranice - Triky CSS

Anonim

border-boundaryMajetek CSS nastavené omezení na hranice prvkem, který ovlivňuje jak hranice prvku je chovat. Je to definováno ve specifikaci CSS Round Display Level 1, která je aktuálně ve stavu Working Draft. To znamená, že od nynějška po formální doporučení kandidátů se věci mohou změnit.

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

Skutečnost, že tato vlastnost žije ve specifikaci CSS Round Display, vám již napovídá, v čem je dobrá: vytváření kruhových rozhraní. Ještě konkrétněji border-boundaryspadá pod sekci „Kreslení ohraničení kolem ohraničení displeje“, která je dalším vodítkem k tomu, co dělá dobře: umožňuje hranicím prvku respektovat kulatou hranici kruhových rozhraní.

Představte si, pokud chcete, chytré hodinky s kulatou obrazovkou. Řekněme, že obrazovka má čtverec 150 pixelů. A v něm je oranžová krabička, která má stejné rozměry.

Nic, blázen, že? Oranžový rámeček odpovídá zaoblenému displeji, protože přetéká hranami, které jsou skryté. Podívejte se, co se stane, když se do rámečku přidá hranice…

Hmm, ne tak skvělý. Okraje rámečku opět přetékají kulatým displejem, takže se náš okraj v procesu ořízne.

To je místo, kde border-boundaryzapadá do obrazu. Jeho přidání do pole s hodnotou displayumožňuje okraji rámečku sledovat kulatý tvar displeje. Vzhledem k tomu, že podpora prohlížeče vlastnosti je v tuto chvíli přesně zilch, dovolte mi nabídnout zesměšněný vizuál zamýšleného výsledku.

Vidíš to? Okraj respektuje kulatý tvar displeje a brání jeho ořezávání.

Dokážete si představit, jak by to mohlo být užitečné, pokud jde o navrhování hodinek s rozhraním. Pracovní skupina pro CSS sestavila seznam možných případů použití, kdy border-boundaryby se vám mohly hodit.

Syntax

border-boundary: none | parent | display;
  • Počáteční hodnota: none
  • Platí pro: všechny prvky
  • Zděděno: ano
  • Procenta: n / a
  • Vypočítaná hodnota: jak je uvedeno
  • Typ animace: diskrétní

Hodnoty

  • none: na hranici není stanovena hranice.
  • parent: nastaví hranici, kde se setkává oblast prvku a okraje okraje jeho rodiče.
  • display: nastaví hranici, kde se setkává oblast prvku a okraje okraje výřezu.

Podpora prohlížeče

V době psaní tohoto článku žádný.

Další čtení

  • Specifikace kulatého zobrazení CSS úrovně 1 (pracovní koncept)
  • Příklady kulatého zobrazení (Wiki CSS Working Group)
  • Specifikace CSS Round Display (01.org)