Vidéo: Photoshop CS6 : Amélioration du contour d'une sélection 2025
L'effet de bordure-rayon CSS3 définit des coins arrondis. De plus, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un rayon de bordure. Voici quelques règles pour définir un border-radius:
-
Vous ne pouvez pas appliquer un border-radius à un sélecteur (un style CSS) qui n'a pas de hauteur ou de largeur définie (au moins l'un ou l'autre).
-
La propriété de base pour un border-radius dans CSS3 est border-radius, suivie d'une valeur. Par exemple, border-radius: 12px; crée des coins arrondis aux quatre coins de l'élément auquel il est appliqué. Et le "arrondi" de ces coins s'étendra sur 12 pixels depuis les coins.
-
Vous pouvez définir des rayons distincts pour chaque coin d'une bordure. Par exemple:
border-top-left-radius: 1px; border-top-right-rayon: 2px; Bord-bas-droite-rayon: 3px; border-bottom-left-rayon: 4px;
Prenons l'exemple suivant: un style de classe qui définit à la fois les bordures et les rayons de bordure. Le style CSS suivant crée un. Classe de bordures qui applique à la fois les bordures et les rayons de bordure à tout élément auquel elle est appliquée:
. frontières {frontière: 12px gris uni; border-haut-gauche-rayon: 48px; border-top-right-radius: 24px; Bord-bas-droite-rayon: 12px; border-bottom-left-rayon: 6px; padding: 12px;}
Le résultat du code précédent, comme indiqué dans le navigateur Chrome, représente le sélecteur de classes (style) avec une bordure définie et des propriétés de rayon de bordure définies.
Le code de coin arrondi (border-radius) fonctionne très bien dans les versions contemporaines d'IE et de Chrome car ces navigateurs ne nécessitent pas de préfixe pour cet effet. Mais pour faire fonctionner frontière-rayon dans Mozilla Firefox, navigateurs WebKit comme Safari (pour ordinateur de bureau / portable et mobile), et certaines versions d'Opera, vous devez faire trois copies du code border-radius avec les préfixes appropriés, comme ceci:
. frontières {frontière: 12px gris uni; border-haut-gauche-rayon: 48px; border-top-right-radius: 24px; Bord-bas-droite-rayon: 12px; border-bottom-left-rayon: 6px; -moz-border-haut-gauche-rayon: 48px; -moz-border-top-right-rayon: 24px; -moz-border-bottom-right-rayon: 12px; -moz-border-bas-gauche-rayon: 6px; -webkit-border-top-left-rayon: 48px; -webkit-border-top-right-rayon: 24px; -webkit-border-bottom-right-rayon: 12px; -webkit-border-bas-gauche-rayon: 6px; -o-border-haut-gauche-rayon: 48px; -o-border-top-right-rayon: 24px; -o-border-bottom-right-rayon: 12px; -o-border-bas-gauche-rayon: 6px; padding: 12px;}
Avec seulement quatre versions de la définition de style CSS, cette bordure fonctionnera dans tous les principaux navigateurs actuels.
Les utilisateurs qui consultent la page dans les anciens navigateurs doivent renoncer à l'expérience de conception améliorée qu'ils obtiendraient s'ils consultaient la page dans un navigateur de la génération actuelle. Mais comme l'effet CSS3 n'est pas requis pour afficher le contenu de la page, il est toujours accessible (et dans cet exemple, la bordure apparaît toujours).
