Utilisation de Border-Radius en CSS

CSS3 : Les coins arrondis
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML 5 et CSS3
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont les suivants : comprendre l'utilisation de la propriété border-radius, apprendre à utiliser les préfixes pour assurer la compatibilité avec différents navigateurs, et incorporer des solutions JavaScript pour les navigateurs non compatibles.

Apprenez à utiliser border-radius pour arrondir les coins des éléments en CSS, et assurez-vous de la compatibilité avec différents navigateurs en utilisant des préfixes.

Dans cette leçon, vous découvrirez comment utiliser la propriété border-radius en CSS pour donner des coins arrondis à des éléments tels que des blocs de texte ou des images. Nous aborderons les différentes manières de spécifier cette propriété et l'importance de l'utilisation des préfixes pour garantir la compatibilité avec tous les navigateurs, y compris Firefox, Safari, Chrome et Opera.

Nous vous montrerons également comment utiliser des propriétés complémentaires comme background-color, padding et border pour améliorer l'esthétique de vos éléments. Pour les navigateurs comme Internet Explorer qui ne supportent pas nativement cette propriété, nous expliquerons comment incorporer des scripts JavaScript, comme rundis.js, afin d'obtenir un rendu similaire.

Enfin, nous testerons les valeurs du border-radius sur différents éléments pour observer les résultats et comprendre l'effet de chaque valeur sur les coins des éléments.

Voir plus
Questions réponses
Pourquoi utilise-t-on des préfixes en CSS?
Les préfixes permettent de s'assurer que les nouvelles propriétés CSS sont reconnues et correctement rendues par différents navigateurs qui peuvent ne pas encore supporter les standards actuels.
Quel script peut-on utiliser pour Internet Explorer pour gérer border-radius?
Le script rundis.js peut être utilisé afin de permettre aux anciennes versions d'Internet Explorer de gérer les coins arrondis avec la propriété border-radius.
Quelle est la syntaxe pour appliquer différents rayons aux quatre coins d'un élément avec border-radius?
Pour appliquer différents rayons aux quatre coins d'un élément avec border-radius, vous pouvez fournir quatre valeurs : une pour chaque coin, en commençant par le coin supérieur gauche, puis supérieur droit, inférieur droit et enfin inférieur gauche.

Programme détaillé