CSS3 consente di controllare in modo molto preciso lo sfondo degli elementi della pagina.
Tra le nuove proprietà introdotte troviamo background-clip che consente di specificare quale sarà l'area interessata dallo sfondo. I valori disponibili sono:
- border-box: lo sfondo verrà disegnato a partire dal bordo (il bordo sovrasta comunque lo sfondo)
- padding-box: lo sfondo verrà disegnato a partire dalla spaziatura interna dell'elemento
- content-box: lo sfondo verrà disegnato a partire dal contenuto
Lo stile presentato nell'esempio seguente mostra in modo evidente i diversi risultati che si possono ottenere utilizzando la proprietà background-clip:
div { color: #000; padding: 20px; border: 10px dotted #f00; background-color: yellow; } div.borderBox { background-clip: border-box; } div.paddingBox { background-clip: padding-box; } div.contentBox { background-clip: content-box; }
Le specifiche complete per gli sfondi e i bordi di CSS3 sono disponibili all'indirizzo http://www.w3.org/TR/css3-background/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Creare una libreria CSS universale: Nav menu
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Potenziare la ricerca su Cosmos DB con Full Text Search
Utilizzare l nesting nativo dei CSS
Miglioramenti nelle performance di Angular 16
Miglioramenti nell'accessibilità con Angular CDK
Gestione dell'annidamento delle regole dei layer in CSS
Creare una custom property in GitHub
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Gestire il colore CSS con HWB