Piiripiir - CSS-trikid

Lang L: none (table-of-contents)

border-boundaryVara CSS komplekt piirangud piire element, mis mõjutab kuidas element piire käituda. See on määratletud 1. taseme CSS-i ümmarguse kuva spetsifikatsioonis, mis on praegu tööprojekti olekus. See tähendab, et praeguse ja ametliku kandidaatide soovitamise vahel võivad asjad muutuda.

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

Asjaolu, et see omadus elab CSS ümmarguse kuva spetsifikatsioonides, ütleb juba teile, milles see on hea: ümmarguste liideste loomine. Veelgi täpsemalt, border-boundarykuulub jaotise „Piiride joonistamine ekraanipiiri ümber” alla, mis on veel üks vihje selle kohta, mida see hästi teeb: võimaldades elemendi piiridel austada ümmarguste liideste piiri.

Kujutage soovi korral ette ümmarguse ekraaniga nutikell. Oletame, et ekraan on 150px ruut. Ja selles on oranž kast, millel on samad mõõtmed.

Ei midagi, hull, eks? Oranž kast vastab ümardatud ekraanile, kuna see on üle peidetud servade. Aga vaadake, mis juhtub, kui kasti lisatakse piir ...

Hmm, mitte nii suurepärane. Jällegi on kasti servad ümmarguse ekraani üle voolanud, nii et meie piir lõigatakse selle käigus.

See, kui border-boundarymahub pilt. Selle lisamine kasti väärtusega displayvõimaldab kasti äärel järgida ekraani ümmargust kuju. Kuna vara brauseri tugi on praegu täpselt nõrk, lubage mul pakkuda kavandatud tulemuse pilgatud visuaali.

Näete seda? Ääris austab ekraani ümmargust kuju, takistades selle lõikamist.

Võite ette kujutada, kui kasulik võib see olla liidestega käekellade kujundamisel. CSS-i töörühm on koostanud loetelu võimalikest kasutusjuhtumitest, kus see border-boundaryvõib tõesti kasulik olla.

Süntaks

border-boundary: none | parent | display;
  • Algne väärtus: none
  • Kehtib kõigi elementide kohta
  • Päritud: jah
  • Protsendid: n / a
  • Arvutatud väärtus: määratletud
  • Animatsiooni tüüp: diskreetne

Väärtused

  • none: piiril pole piiri seatud.
  • parent: määrab piiri, kus elemendi ala ja selle vanema piiriservad kokku saavad.
  • display: määrab piiri, kus elemendi ala ja vaateava ääreservad kokku puutuvad.

Brauseri tugi

Kirjutamise ajal pole ühtegi.

Lisalugemist

  • CSS ümmarguse kuva 1. taseme spetsifikatsioon (töö mustand)
  • Ümmarguse kuvamise näited (CSS Working Group Wiki)
  • CSS ümmarguse kuva tehnilised andmed (01.org)

Huvitavad Artiklid...