Résumé de l'utilisation des coins arrondis et des bordures arrondies CSS3

Avant l'avènement de CSS3, l'effet des coins arrondis pouvait être obtenu via des images ou des attributs de marge. La solution traditionnelle de génération de coins arrondis nécessitait plusieurs images comme motifs d'arrière-plan. Après l'émergence de CSS3, il n'est plus nécessaire de perdre du temps à créer plusieurs images, ce qui réduit considérablement la charge de travail, améliore les performances des pages Web, améliore la vitesse de chargement des pages et augmente la fiabilité visuelle. Maintenant que nous avons dit que les coins arrondis en CSS3 présentent de nombreux avantages, résumons comment utiliser les coins arrondis et les bordures arrondies en CSS3.

Vous pouvez apprendre 《Rapidement 》 Introduction aux coins arrondis CSS3 dans "Tutoriel S'amuser avec CSS3" Cours de chapitre

Connaissance de l'utilisation des coins arrondis CSS3 et des bordures arrondies

1. Introduction et compétences d'application des coins arrondis CSS3

Construction adaptative d'ellipses et de coins arrondis, Pour construire un cercle en CSS, vous il suffit d'ajouter une bordure. La valeur de l'attribut rayon peut être définie sur la moitié de la longueur du côté. Nous donnons ici une introduction complète aux propriétés de border-radius. border-radius est une propriété abrégée. Sa formule d'expansion est border-top-left-radius, border-top-right-radius, border-bottom-right-radius. bordure-rayon inférieur gauche. Il possède également une fonctionnalité peu connue : border-radius peut spécifier les rayons horizontal et vertical séparément, à condition que les deux valeurs soient séparées par une barre oblique ( / ) (les rayons horizontaux et verticaux des coins arrondis sont égaux et peut être combiné). En combinant ces caractéristiques, l'expansion détaillée de border-radius:50% ; devrait être border-radius :50 % 50 % 50 % 50 %/50 % 50 % 50 % 50 %.

2. Partage d'exemples de bordures arrondies et d'effets d'image de bordure CSS3

Les points d'apprentissage sont les suivants :

Bordure-rayon arrondi; box shadow box-shadow border image border-image; La propriété border-radius vous permet d'ajouter des bordures arrondies à vos éléments ! La propriété border-image est utilisée pour définir la bordure de l'image.

3.

Partagez un exemple de code de coins arrondis CSS3 et de fonction de dégradé

Dégradé linéaire : arrière-plan : dégradé linéaire (définir la forme du dégradé, premier point de départ d'une couleur, la position du point de couleur central, la couleur du point final) ; Linéaire : type de dégradé (dégradé linéaire) : paramètres facultatifs de deux manières - 1. Définissez l'angle de rotation, 0 degré représente l'horizontale. angle de gauche à droite, 90 degrés signifie de haut en bas, en commençant à 0 degré et en changeant dans le sens inverse des aiguilles d'une montre.

4.

Utilisation des bordures arrondies CSS3-Earth Tornado

Explication détaillée du border-radius

border-radius:50px

Up Bottom; Les distances droite, gauche, horizontale et verticale sont de 50px

border-radius:50%; Le signe % ici est la base de la longueur et de la largeur de l'élément de style CSS qui a été appliqué

border-radius:50% 30 %; Haut et bas, horizontal et vertical est d'environ 50 %, horizontal et vertical est de 30 %

border-radius : 50 % 30 % 10 % Haut, horizontal et la verticale est de 50 %, la gauche et la droite, la verticale horizontale est de 30 %, le bas, l'horizontale et la verticale sont de 10 %

border-radius:10% 50% 30% 10% Up, l'horizontale et la verticale sont toutes deux de 10 %. La droite, l'horizontale et la verticale sont toutes deux à 50 %. Vers le bas, horizontalement et verticalement, 30 %. Gauche, horizontal et vertical sont tous à 10% /Le devant est horizontal,/le dos est vertical

bordure-rayon : 50% / 30% Haut, gauche, bas, droite, horizontal 50 %, vertical 30 %

border-radius : 50 % / 30 % 10 % ; vertical gauche et droit 10 % ;

5.

Coins arrondis CSS3, ombre, transparent

Il existe deux façons d'obtenir des coins arrondis en CSS3.

La première est l'image d'arrière-plan. n'avoir qu'une seule image d'arrière-plan pour chaque élément, mais CSS3 peut permettre à un élément d'avoir plusieurs images d'arrière-plan. De cette façon, quatre images d'arrière-plan en 1/4 de cercle sont ajoutées à un élément, situé en 4. Vous pouvez obtenir des coins arrondis sur un seul coin. .

La deuxième méthode est simple et peut être implémentée directement avec CSS sans utiliser d'images

6

Méthode de production de bordure arrondie CSS3

Firefox et. Safari utilise des propriétés privées pour obtenir l'effet de coin arrondi ; cela représente la couleur de l'image inférieure dans la bordure ; bordure : 1px solid #000 ; représente la largeur de la bordure, unie, et la couleur est noire ; -radius : 55px 25px ; indique l'effet arrondi de bordure dans le coin supérieur gauche, qui peut être identifié en anglais : top, left La longueur des coins arrondis modifiés est obtenue en contrôlant la valeur du pixel, et 55px indique la longueur horizontale. 25px indique la longueur verticale ; De même, border-bottom-right-radius : 55px 25px ; pour l'effet de coin arrondi dans le coin inférieur droit, utilisez simplement CSS3 pour obtenir l'effet de coin arrondi de bordure.

Questions et réponses connexes

1

Le rayon de bordure arrondi CSS3 crée des angles vifs.

2.

Problème de coins arrondis CSS3 du navigateur WeChat

3.

Problème de rectangle arrondi CSS3

【 Recommandations associées 】

1. Tutoriel vidéo gratuit sur le site Web PHP chinois :

Dernier didacticiel vidéo CSS3

2. Tutoriel gratuit sur le site Web PHP chinois :

Explication détaillée du dernier didacticiel de base CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!