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
Ottimizzazione dei block template in Angular 17
Reactive form tipizzati con FormBuilder in Angular
Sfruttare al massimo i topic space di Event Grid MQTT
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare database e servizi con gli add-on di Container App
Semplificare il deployment di siti statici con Azure Static Web App
Implementare l'infinite scroll con QuickGrid in Blazor Server
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare flat e flatMap per appiattire array innestati in array
Implementare il throttling in ASP.NET Core
Utilizzare la session affinity con Azure Container Apps
Limitare le richieste lato server con l'interactive routing di Blazor 8
I più letti di oggi
- Creare un messaggio di posta in diversi formati con ASP.NET 2.0
- Caricare un DTO esposto da un servizio tramite una query LINQ to Entities in Entity Framework
- Utilizzare il metodo reduce in #javascript https://aspit.co/ccc di @morwalpiz
- Elencare gli utenti di un dominio NT con ADSI
- Utilizzare SQL e #linq per eseguire una query con #entityframework Core https://aspit.co/bfv di @sm15455 #efcore1
- Disponibile il codice sorgente di ASP.NET MVC
- Concludiamo in bellezza con Giancarlo Sudano di Microsoft: q# for quantum programming Siamo in live streaming da: https://aspit.co/netconf-22 #aspilive #netconfit
- Caricare i dati di configurazione allo startup di un'applicazione Angular
- rilasciati nuovi template per la #aspnet web pages. funzionano anche con #webmatrix: http://u.aspitalia.com/lu
- Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps