Rajan raja - CSS-temppuja | CSS-almanakka 2025

border-boundaryOmaisuus CSS asettaa rajoituksia rajat elementti, joka vaikuttaa siihen, miten elementin rajojen käyttäytyvät. Se on määritelty CSS Round Display Level 1 -määrityksessä, joka on tällä hetkellä Working Draft -tilassa. Tämä tarkoittaa, että asiat voivat muuttua nyt ja virallisen ehdokassuosituksen välillä.

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

Se, että tämä ominaisuus asuu CSS: n pyöreän näytön spesifikaatiossa, kertoo jo, mihin se on hyvä: pyöreiden rajapintojen luominen. Vielä tarkemmin sanottuna se border-boundarykuuluu "Piirrä näyttöreunan ympärille" -osioon, mikä on jälleen yksi vihje siihen, mitä se tekee hyvin: antaa elementin rajojen kunnioittaa pyöreiden rajapintojen pyöreää rajaa.

Kuvittele, jos haluat, älykellon, jolla on pyöreä näyttö. Oletetaan, että ruutu on 150 kuvapistettä. Ja siinä on oranssi laatikko, jonka mitat ovat samat.

Ei mitään, hullu, eikö? Oranssi ruutu on pyöristetyn näytön mukainen, koska se on täynnä piilotettuja reunoja. Mutta katso mitä tapahtuu, kun ruutuun lisätään reuna ...

Hmm, ei niin hienoa. Jälleen laatikon reunat täyttävät pyöreän näytön, joten reunamme leikataan prosessin aikana.

Siellä border-boundarysopii kuvaan. Kun lisäät sen ruutuun, jonka arvo on, displayruudun reunat voivat seurata näytön pyöreää muotoa. Koska kiinteistön selaintuki on tällä hetkellä täsmällistä, anna minun tarjota visuaalinen visuaalinen aiottu tulos.

Näetkö tuon? Reuna kunnioittaa näytön pyöreää muotoa estäen sitä leikkautumasta.

Voit kuvitella, kuinka hyödyllistä tämä voi olla, kun suunnitellaan käyttöliittymällä varustettuja kelloja. CSS-työryhmä on koonnut luettelon mahdollisista käyttötapauksista, joissa border-boundaryvoi todella olla hyötyä.

Syntaksi

border-boundary: none | parent | display;

Alkuarvo: none
Koskee kaikkia elementtejä
Peritty: kyllä
Prosenttiosuudet: n / a
Laskettu arvo: määritelty
Animaation tyyppi: erillinen

Arvot

none: rajalle ei ole asetettu rajaa.
parent: asettaa rajan, jossa elementin alue ja sen vanhemman reunareunat kohtaavat.
display: asettaa rajan, jossa elementin alue ja näkymän reunareunat kohtaavat.