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
Utilizzare un service principal per accedere a Azure Container Registry
Usare lo spread operator con i collection initializer in C#
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Utilizzare politiche di resiliency con Azure Container App
Creare moduli CSS in React
Disabilitare automaticamente un workflow di GitHub (parte 2)
Utilizzare le collection expression in C#
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Miglioramenti nelle performance di Angular 16
Hosting di componenti WebAssembly in un'applicazione Blazor static
Sfruttare lo streaming di una chiamata Http da Blazor
Gestire liste di tipi semplici con Entity Framework Core