Introduction aux coins arrondis CSS3
Avantages des coins arrondis CSS3
Le schéma traditionnel de génération de coins arrondis doit utiliser plusieurs images comme motifs d'arrière-plan. L'émergence de CSS3 fait qu'on ne perd plus de temps à créer ces images, et il y a bien d'autres avantages :
* Réduire la charge de travail de maintenance. Le travail de génération, de mise à jour des fichiers image et d’écriture du code de la page Web n’est plus nécessaire.
* Améliorer les performances des pages Web. Les pages Web se chargeront plus rapidement car il n’y aura plus de requêtes HTTP inutiles.
* Augmente la fiabilité visuelle. Dans certaines circonstances (congestion du réseau, erreur de serveur, vitesse lente du réseau, etc.), le téléchargement de l'image d'arrière-plan peut échouer, entraînant des effets visuels médiocres. Cela n'arrive pas avec CSS3.
Propriété CSS3 border-radius
Syntaxe de base :
border-radius : none | ;length>{1,4} ]?
Plage de valeurs :
<length> : Une valeur de longueur composée d'un nombre à virgule flottante et d'un identifiant d'unité. Ne peut pas être négatif.
Explication simple :
Border-radius est une méthode d'abréviation. Si les valeurs avant et après "/" existent toutes les deux, alors la valeur avant "/" définit son rayon horizontal et la valeur après "/" définit son rayon vertical. Sans le "/", les rayons horizontal et vertical sont égaux. De plus, ses quatre valeurs sont définies dans l'ordre supérieur gauche, haut droit, bas droit et bas gauche. Les situations suivantes se produiront principalement :
1. Il n'y en a qu'une. valeur, alors Les quatre valeurs en haut à gauche, en haut à droite, en bas à droite et en bas à gauche sont égales.
2. Il y a deux valeurs, alors le coin supérieur gauche est égal au coin inférieur droit et prend la première valeur ; le coin supérieur droit est égal au coin inférieur gauche et prend la deuxième valeur
<🎜. > 3 , il y a trois valeurs, la première valeur est à définir en haut à gauche ; la deuxième valeur est en haut à droite et en bas à gauche et elles seront égales, et la troisième valeur est à définir en bas à droite. 4. Il y a quatre valeurs, la première valeur est à définir en haut à gauche, la deuxième valeur est en haut à droite, la troisième valeur est en bas à droite et la quatrième valeur est à définir en bas à gauche. n'a qu'une seule valeur :<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html> a deux valeurs : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html> a trois valeurs : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html> a 4 valeurs : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>Prise en charge des navigateurs
IE 9, Opera 10.5, Safari 5, Chrome 4 et Firefox 4 prennent tous en charge l'attribut border-radius ci-dessus. Les premières versions de Safari et Chrome prennent en charge l'attribut -webkit-border-radius, et les premières versions de Firefox prennent en charge l'attribut -moz-border-radius. Actuellement, afin d'assurer la compatibilité, il vous suffit de définir -moz-border-radius et border-radius en même temps. -moz-border-radius : 15px;border-radius : 15px;
(Remarque : border-radius doit être déclaré en dernier, sinon il pourrait être invalide.)
Bien que tous les principaux navigateurs prennent en charge border-radius, l'implémentation est différente dans certains détails. Lorsque la couleur, la largeur, le style (cadre plein, cadre en pointillés, etc.) et les unités des quatre coins sont les mêmes, les résultats de rendu de tous les navigateurs sont fondamentalement les mêmes une fois que les paramètres des quatre coins sont différents ; il y a de grandes différences.
Tous les navigateurs ne prennent pas en charge la définition du rayon de coin sous forme de valeur en pourcentage. L'approche la plus sûre à l'heure actuelle consiste à définir le style et la largeur de chaque bordure arrondie sur la même valeur et à éviter d'utiliser des valeurs en pourcentage.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
