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
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Gestione file Javascript in Blazor con .NET 9
Creare una libreria CSS universale: Cards
Supportare la crittografia di ASP.NET Core con Azure Container App
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Ridurre il reflow ottimizzando il CSS
Introduzione alle Container Queries
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Selettore CSS :has() e i suoi casi d'uso avanzati
Testare l'invio dei messaggi con Event Hubs Data Explorer
Creare una libreria CSS universale: Nav menu