CSS Round Bords
Exemple # 01:
Aroundons les bords de toutes les images ou des paragraphes. Nous avons commencé le code HTML avec l'utilisation de la balise de base HTML suivie de la balise de tête. La balise Head contient la balise de titre qui a été utilisée pour donner un titre à la page Web comme «CSS Arronds ou Corners». Dans l'étiquette corporelle du document HTML, nous utilisons une rubrique de taille 1 qui ne sera pas utilisée pour autour des coins. Trois paragraphes ont été utilisés par l'utilisation de la balise de paragraphe «P».
Les deux premiers paragraphes ont été spécifiés avec 2 classes différentes: A et B. Le troisième paragraphe a été spécifié avec l'ID «C». Tous ces trois paragraphes contiennent des phrases qui pourraient être utilisées comme contenu du paragraphe. Ces paragraphes peuvent être affichés avec des bords arrondis sur la page HTML. Jetons un œil au CSS de cette page. Dans l'étiquette de style de ce script HTML, nous avons spécifié les classes A et B pour les deux premiers paragraphes pour les styliser séparément pendant que l'ID «C» est utilisé avec le signe de hachage à styliser séparément.
Nous utilisons la propriété du rayon de bordure pour la première classe «A» pour ajouter le rayon de 25 pixels et l'arrière-plan serait coloré, bleu ciel. La propriété du rayon de bordure a également été utilisée pour la deuxième classe pour ajouter le rayon de bordure de 45 pixels avec une bordure solide de deux pixels autour. Pour les deux premières classes, nous utilisons une largeur de 200 pixels de 20 pixels et une hauteur de 50 pixels. D'un autre côté, le troisième identifiant de paragraphe a été utilisé pour ajouter le rayon de 90 pixels autour.
En utilisant la propriété d'arrière-plan, une image a été ajoutée comme arrière-plan. Parallèlement à cela, la propriété de position d'arrière-plan a été utilisée pour positionner l'arrière-plan d'une image et la propriété de répétition d'arrière-plan a été définie pour répéter. En raison de l'utilisation de cette propriété, l'image d'arrière-plan peut être répétée autant de fois que possible. Le rembourrage, la hauteur et la largeur seraient cités de la même manière que nous avons utilisé dans les deux styles ci-dessus pour les paragraphes. Le code est maintenant terminé et nous pouvons l'exécuter sur le code Visual Studio via le menu «Exécuter» de sa barre des tâches suivis de l'option «Débogage de démarrage».
La sortie de ce code HTML a été affichée sur le navigateur Chrome comme ci-dessous. Les deux premiers paragraphes ont été stylisés dans le rayon de bordure de 25 pixels et 45 pixels respectivement. Les deux paragraphes contiennent des arrière-plans différents avec un même rembourrage, largeur et hauteur. Vous pouvez voir que les bords du rayon du paragraphe ont été arrondis.
De plus, le troisième paragraphe a été affiché dans le rayon du cercle de 90 pixels tandis que l'image utilisée comme arrière-plan a été répétée plusieurs fois.
Exemple n ° 2:
Nous devons initialiser cet exemple avec la balise HTML principale et la balise de tête. La balise de titre a été utilisée pour donner le titre à cette page HTML sous le nom de «CSS Arronded Bords ou Corners». Tout en jetant un coup d'œil à l'étiquette corporelle de ce script HTML, nous avons trouvé un seul cap de la taille 1 avec un titre de texte simple. Cette page HTML contient un total de 5 paragraphes avec l'utilisation de balises ou d'éléments de paragraphe. Le premier paragraphe montre que cela contiendra un rayon de bordure de 50 pixels et que la forme de l'éclipse serait formée.
Le deuxième paragraphe n'utilise rien d'autre qu'une «éclipse» d'identification. Les trois autres paragraphes contiennent leurs propres classes spécifiées: quatre, trois et deux, ainsi que certaines phrases montrant les valeurs de la radius frontalière utilisées pour la création de différentes éclipses pour des paragraphes particuliers. Ces paragraphes montreraient le nombre total de coins qui sont arrondis. L'ID «Eclipse» du premier paragraphe a été utilisé pour styliser le premier paragraphe d'une éclipse. Nous avons spécifié le rayon de bordure de 50%, l'arrière-plan de couleur vert jaune, le rembourrage de 10 pixels, la largeur de 110 pixels et la hauteur de 50 pixels pour le premier paragraphe. Ensuite, nous avons utilisé la classe du troisième paragraphe, «Four», pour contourner les quatre coins du paragraphe. Pour cela, nous utilisons la propriété du rayon de bordure pour les bords supérieur, bas, gauche et droit du paragraphe. Nous avons spécifié l'arrière-plan en bois noir, avec un rembourrage de 15 pixels, une largeur de 200 pixels et une hauteur de 40 pixels.
Cela signifie que les quatre coins ou bords du troisième paragraphe seraient arrondis. Pour que le quatrième paragraphe soit conçu par la classe «trois», trois de ses coins ou bords seraient arrondis tandis que celui serait inchangé. L'arrière-plan a été spécifié comme l'or tandis que le rembourrage, la largeur et la hauteur seraient les mêmes que nous avons utilisés pour le troisième paragraphe. Nous utilisons la classe «Two» pour le cinquième paragraphe pour contourner ses deux coins. Le même rembourrage, largeur et hauteur seraient utilisés tandis que la couleur serait différente pour ce paragraphe. Le premier paragraphe ne serait afficher des bords arrondis car il ne contient aucun style pour cela. Enregistrons ce script HTML et exécutons-le avec Visual Studio Code via l'option Débogage de démarrage.
La sortie de ce programme HTML a montré que le premier paragraphe ne contient aucun bord arrondi car nous avons manqué le style de ce paragraphe. D'un autre côté, les quatre paragraphes ont été stylisés et nous avons des bords arrondis pour tous ces.
Conclusion
Il s'agit de l'utilisation de la propriété du rayon de bord. À cette fin, nous avons utilisé les exemples HTML d'une manière très simple et exquise. Avec le premier exemple, nous avons démontré l'utilisation de la propriété du rayon de bordure pour arrondir tous les bords d'un élément ou d'une image à la fois sans spécifier les bords. D'un autre côté, dans le deuxième exemple, nous avons spécifié l'utilisation de différents coins ou bords pour arronser ces bords ou coins en conséquence par l'utilisation de différentes valeurs.