A border-boundaryCSS tulajdonság korlátokat szab egy elem határaira, amely befolyásolja az elem szegélyeinek viselkedését. Ez a CSS 1. szintű kijelzőjének specifikációjában van meghatározva, amely jelenleg Working Draft állapotban van. Ez azt jelenti, hogy a dolgok változhatnak most és a hivatalos jelöltajánlások között.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Az a tény, hogy ez a tulajdonság a CSS Round Display specifikációban él, már megmondja, miben jó: kör alakú interfészek létrehozásában. Még pontosabban border-boundarya „Határok rajzolása a kijelző határán” szakasz alá tartozik, ami egy újabb nyom arra, hogy mit csinál jól: lehetővé teszi az elem határainak, hogy tiszteletben tartsák a kör alakú interfészek kerek határát.
Képzelje el, ha akarja, egy kerek képernyős okosórát. Tegyük fel, hogy a képernyő 150px négyzet. És abban egy narancssárga doboz található, amelynek méretei megegyeznek.
Semmi, őrült, igaz? A narancssárga doboz megfelel a lekerekített kijelzőnek, mert túlcsordítja az elrejtett széleket. De nézze meg, mi történik, ha határ kerül a dobozba ...
Hmm, nem olyan nagyszerű. Ismételten a doboz szélei túlcsordulnak a kerek kijelzőn, így a szegélyünk nyírásra kerül.
Ott border-boundaryillik a képbe. Ha hozzáadja a mezőhöz egy értékkel, akkor displaya doboz szegélye követheti a kijelző kerek alakját. Mivel az ingatlan böngészőtámogatása jelenleg éppen zilch, engedje meg, hogy felajánlja a tervezett eredmény egy csúfolt látványát.
El tudja képzelni, hogy ez mennyire hasznos lehet, ha interfészekkel ellátott órákra tervezünk. A CSS munkacsoport összeállította a lehetséges felhasználási esetek listáját, border-boundaryamelyek valóban hasznosak lehetnek.
Szintaxis
border-boundary: none | parent | display;- Kezdő érték:
none - Alkalmazható: minden elem
- Örökölt: igen
- Százalékok: n / a
- Számított érték: a megadott
- Animáció típusa: diszkrét
Értékek
none: nincs határ meghatározva a határon.parent: beállítja azt a határt, ahol az elem területe és a szülő határszélei találkoznak.display: meghatározza azt a határt, ahol az elem területe és a nézetablak szegélye találkozik.
Böngésző támogatás
Az írás idején egyik sem.
További irodalom
- CSS 1. szintű kijelző specifikáció (Munka piszkozat)
- Kerek megjelenítési példák (CSS Working Group Wiki)
- CSS kerek kijelző specifikációk (01.org)