border-boundaryNieruchomość w zestaw CSS ograniczeń na granicach element, który wpływa na to jak granice elementu za zachowywać. Jest zdefiniowany w specyfikacji CSS Round Display Level 1, która obecnie ma status Working Draft. Oznacza to, że sytuacja może się zmienić od chwili obecnej do formalnej rekomendacji kandydata.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Fakt, że ta właściwość znajduje się w specyfikacji CSS Round Display, mówi już, w czym jest dobra: w tworzeniu okrągłych interfejsów. Mówiąc dokładniej, border-boundarynależy do sekcji „Rysowanie granic wokół krawędzi wyświetlania”, co jest kolejną wskazówką, co robi dobrze: pozwala, aby granice elementu były zgodne z okrągłymi granicami okrągłych interfejsów.
Wyobraź sobie, jeśli chcesz, inteligentny zegarek z okrągłym ekranem. Powiedzmy, że ekran ma kwadrat 150 pikseli. A w nim jest pomarańczowe pudełko o tych samych wymiarach.
Nic, szalone, prawda? Pomarańczowe pudełko pasuje do zaokrąglonego wyświetlacza, ponieważ przepełnia krawędzie, które są ukryte. Ale spójrz, co się dzieje, gdy do pola zostanie dodana ramka…
Hmm, nie za dobrze. Ponownie, krawędzie pudełka przepełniają okrągły wyświetlacz, więc nasza krawędź zostaje przycięta w procesie.
Tutaj border-boundarypasuje do obrazu. Dodanie go do pudełka o wartości to displaypozwala, aby jego obramowanie podążało za okrągłym kształtem wyświetlacza. Ponieważ obsługa przeglądarki tej usługi jest w tej chwili dokładnie zilch, pozwólcie, że przedstawię makietę wizualną zamierzonego wyniku.
Możesz sobie wyobrazić, jak przydatne może to być przy projektowaniu zegarków z interfejsami. Grupa robocza ds. CSS opracowała listę możliwych przypadków użycia, w których border-boundarynaprawdę może się przydać.
Składnia
border-boundary: none | parent | display;- Wartość początkowa:
none - Dotyczy: wszystkich elementów
- Odziedziczone: tak
- Procenty: nie dotyczy
- Wartość obliczona: jak określono
- Typ animacji: dyskretna
Wartości
none: żadna granica nie jest wyznaczona na granicy.parent: ustala granicę, gdzie spotykają się obszar elementu i krawędzie krawędzi jego rodzica.display: ustala obwiednię, gdzie spotykają się obszar elementu i krawędzie graniczne rzutni.
Wsparcie przeglądarki
Brak w chwili pisania.
Dalsza lektura
- Specyfikacja CSS Round Display Level 1 (wersja robocza)
- Przykłady okrągłych ekranów (Wiki grupy roboczej CSS)
- Specyfikacja CSS Round Display (01.org)