Vidéo: Coins-arrondis avec CSS 3 pour le web designer PARTIE 1 2025
Si vous avez créé une boîte aux coins arrondis en utilisant les versions précédentes de CSS, d'images et de tableaux HTML, vous savez à quel point il est difficile de créer quatre images (une pour chaque coin), et comment vous avez dû ajuster soigneusement tout de sorte que les coins alignés juste ainsi.
Que vous ayez ou non essayé l'ancienne technique, vous apprécierez à quel point la création de coins arrondis est plus facile lorsque vous utilisez la propriété CSS 3 border-radius.
Lorsque vous utilisez border-radius, vous spécifiez la longueur du rayon comme valeur pour créer les coins arrondis. Vous pouvez ensuite arrondir vos coins arrondis comme vous le souhaitez et vous pouvez appliquer le style à n'importe lequel ou à tous les coins d'une boîte. Vous voyez ici un diagramme conçu pour vous aider à voir comment le changement de rayon modifie le coin incurvé.
Vous pouvez appliquer border-radius à n'importe quel objet boîte, tel qu'une balise ou une balise
. Voici la syntaxe pour créer des coins arrondis dans CSS 3 pour les navigateurs WebKit (notez que r représente rayon, la distance du centre d'un cercle au coin incurvé):
-webkit-border-radius: r longueur;
Si vous souhaitez spécifier un rayon différent pour chaque coin, votre style pourrait ressembler plus au bit de code suivant. Dans cette figure, vous voyez comment les valeurs changent si le coin arrondi n'est appliqué qu'aux coins supérieur droit et inférieur gauche:
-webkit-border-haut-gauche-rayon: 0; -webkit-border-top-right-rayon: 25px; -webkit-border-bottom-right-rayon: 0; -webkit-border-bottom-left-rayon: 25px;
Vous pouvez avoir encore plus de contrôle sur le rayon si vous spécifiez deux valeurs pour le rayon, comme ceci:
-webkit-border-radius: 50px 100px;
Dans l'exemple suivant, une hauteur de police de l'arrondi a été ajoutée à la boîte afin qu'elle reste à l'échelle du texte. En utilisant l'unité em comme unité de mesure, nous pouvons garder le design en échelle sur l'iPhone et l'iPad. C'est une pratique utile lorsque vous souhaitez ajouter des coins arrondis autour d'un élément de texte, tel qu'un titre:
-webkit-border-radius: 1em;
Dans l'exemple, une ombre portée et un dégradé ont également été utilisés. Vous pouvez ajouter des ombres portées en utilisant CSS 3.
