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
Gestione dello sfondo con CSS3: background-clip (#36) 3
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Selezione e configurazione degli agent nelle pipeline di Azure DevOps
Progressive Web Apps with React
Autenticazione condizionale a due fattori con Azure Active Directory B2C
Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML
Progressive Web Apps with Angular
Indicizzare Cosmos DB con Azure Search
Sfruttare al massimo Kubernetes con Azure DevOps
Creare azioni rapide con SwipeView in Xamarin Forms
Creare un Module Initializer in .NET 5
Utilizzare Azure log streaming con ASP.NET Core
Ecco .NET 5: l'alba di una nuova era per lo sviluppatore .NET
Ricevere notifiche push sull'app con Azure Monitor
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà