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
Commentare una issue associata ad una pull request tramite un workflow di GitHub
GitHub e .NET 6
Effettuare un deployment differenziale con una GitHub Action
Semplificare con un extension method l'aggiunta di filtri a run time nelle query LINQ
Generare un QR Code da ASP.NET Web API
Continuous Deployment tramite GitOps
Utilizzare il metodo reduce in JavaScript
Taggare automaticamente un repository con una pipeline di Azure DevOps
Integrare e trasformare dati con Azure Data Factory
Tracciare gli eventi tramite i DevTools di Chrome
Utilizzare la keyword with in JavaScript
Completare le informazioni di log in Entity Framework Core