Confine di confine - Trucchi CSS

La border-boundaryproprietà in CSS imposta i vincoli ai limiti di un elemento che influiscono sul comportamento dei bordi dell'elemento. È definito nella specifica CSS Round Display Level 1, che è attualmente in stato di Working Draft. Ciò significa che le cose possono cambiare da ora alla raccomandazione formale del candidato.

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

Il fatto che questa proprietà risieda nella specifica CSS Round Display ti dice già in cosa è brava: creare interfacce circolari. Ancora più specificamente, border-boundaryrientra nella sezione "Disegnare i bordi attorno al bordo del display" che è ancora un altro indizio di ciò che fa bene: consentire ai bordi di un elemento di rispettare il contorno rotondo delle interfacce circolari.

Immagina, se vuoi, un orologio intelligente con uno schermo rotondo. Diciamo che lo schermo è di 150 px quadrati. E dentro c'è una scatola arancione delle stesse dimensioni.

Niente, pazzo, vero? La scatola arancione è conforme al display arrotondato perché trabocca dai bordi, che sono nascosti. Ma guarda cosa succede quando viene aggiunto un bordo alla scatola ...

Hmm, non così eccezionale. Ancora una volta, i bordi della scatola traboccano dal display rotondo, quindi il nostro bordo viene ritagliato nel processo.

Ecco dove si border-boundaryinserisce nella foto. Aggiungendolo alla casella con un valore di displayconsente al bordo della casella di seguire la forma rotonda del display. Dal momento che il supporto del browser della proprietà è esattamente zero al momento, permettetemi di offrire un'immagine simulata del risultato desiderato.

Guarda quello? Il bordo rispetta la forma tonda del display, evitando che si tagli.

Puoi immaginare quanto potrebbe essere utile quando si tratta di progettare orologi con interfacce. Il CSS Working Group ha compilato un elenco di possibili casi d'uso in cui border-boundarypotrebbero davvero tornare utili.

Sintassi

border-boundary: none | parent | display;

Valore iniziale: none
Si applica a: tutti gli elementi
Ereditato: sì
Percentuali: n / a
Valore calcolato: come specificato
Tipo di animazione: discreta

Valori

none: nessun confine è impostato sul confine.
parent: imposta il confine dove si incontrano l'area dell'elemento e i bordi del bordo del suo genitore.
display: imposta il confine dove si incontrano l'area dell'elemento e i bordi del bordo della finestra.