Le ultime versioni dei principali browser supportano la proprietà border-radius di CSS3 che consente di specificare l'angolo di arrotondamento da applicare ai vertici dell'elemento.
Ad esempio lo stile definito di seguito consente di applicare a div con classe "box" un bordo nero dello spessore di 2 pixel e smussato di 10 pixel:
<style> div.box { border: 2px solid #000; -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ border-radius: 10px; /* CSS3 standard */ } </style>
Nell'esempio, oltre alla sintassi standard, sono state indicate anche le proprietà specifiche alcuni vendor (Mozilla e WebKit) così da estendere la compatibilità anche con le vecchie versioni di Firefox, Chrome e Safari.
Possiamo diversificare la smussatura di ogni angolo definendo le proprietà border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius e anche applicare un angolo ellittico indicando come valore il rapporto tra asse orizzontale e verticale:
<style> div.box { border-radius: 20px / 10px; /* raggio orizzontale di 20px e verticale di 10px */ } </style>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzare le performance usando Span<T> e il metodo Split
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Gestire progetti NPM in .NET Aspire
Scrivere selettori CSS più semplici ed efficienti con :is()
Creare una libreria CSS universale: Immagini
Creare una libreria CSS universale: Clip-path
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Utilizzare WhenEach per processare i risultati di una lista di task
Recuperare automaticamente un utente e aggiungerlo ad un gruppo di Azure DevOps
Testare il failover sulle region in Azure Storage
Creare agenti facilmente con Azure AI Agent Service
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!