CSS Rayon frontalier de CSS

Vous avez peut-être entendu et utilisé la propriété frontalière dans le style CSS tout en préparant les fichiers HTML pour créer une bordure en surbrillance autour de certains éléments autour des titres, des tables et des paragraphes. Lorsque vous ajoutez une bordure à n'importe quel élément, vous pouvez le coiffer de différentes manières: créer une bordure solide, pointillée et pointillée, ou le décrire également. La propriété Border-Radius vous permet de coincer les coins d'une frontière. Dans ce guide, nous discuterons de différents exemples pour styliser les coins frontaliers en utilisant le contour et la propriété Border-Radius.

Exemple 01:

Commençons par l'exemple le plus élémentaire des frontières. Dans cet exemple, nous démontrerons l'utilisation de la propriété des bordures pour créer une bordure simple autour d'un élément utilisé dans le code HTML. Le code HTML a été lancé avec la balise Doctype «HTML» qui sera fermée à la fin du programme HTML. Après la balise HTML, nous avons utilisé la balise «tête» et la balise corporelle. La balise «Head» utilisera la balise de style pour concevoir notre page Web.

Dans l'étiquette corporelle, nous utilisons le titre «H1» qui sera de la plus grande taille des titres HTML. Cette rubrique ne contient que deux mots, «rayon frontalier». Dans la balise de style, nous utilisons la tête H1 pour le coiffer un peu. Dans les supports bouclés, nous utilisons la «bordure» de la propriété pour créer une bordure autour de la tête. Nous avons spécifié la largeur de la bordure à 3 pixels solides et il sera rouge. Le style et la tête sont fermés ici. Enregistrons et exécutons ce script HTML dans le code Visual Studio et nous ouvrons dans Google Chrome.

Après l'exécution du code HTML dans le code Visual Studio, la page Web HTML a été ouverte dans le navigateur Chrome comme indiqué ci-dessous. Cette page a été affichée avec la tête 1 «statut de bordure» avec sa bordure rouge. Cette bordure est de largeur 3 pixels et il est rouge solide.

Jusqu'à ce que nous n'ayons pas discuté du rayon de la frontière dans notre illustration ci-dessus du code HTML. Nous avons donc utilisé un total de 4 titres avec différents titres. Comme tous les titres sont des titres de taille 1, nous devons les différencier avec des classes. Nous avons spécifié des noms de classe distincts pour les deux titres, «A», «B», «C» et «D». Dans l'étiquette de style d'une étiquette de tête, les classes sont définies pour styliser séparément les deux titres. Bien que nous ayons stylé les deux titres de manière assez similaire, il est nécessaire de le faire séparément et de ne pas les mélanger. Nous avons créé une bordure autour de la première tête avec une couleur rouge solide et il sera de largeur 3 pixels.

La même propriété «frontière» a été utilisée pour les trois autres titres contenant des classes «B», «C» et «D». Le seul changement est la couleur bleu massif, la couleur verte unie et la couleur des orchidées solides au lieu de la couleur rouge pour le reste des titres. Après avoir ajouté la bordure de 3 pixels autour de tous les titres, il est temps d'ajouter un rayon à la frontière. Nous utilisons la propriété Border-Radius pour ajouter une bordure de 25 pixels à la tête 1. Cette valeur unique pour la propriété Border-Radius serait maculée aux 4 coins d'une frontière également.

Après cela, nous utilisons deux valeurs pour la propriété «Border-Radius». Nous avons appliqué ces valeurs pour la tête de trois: la première valeur pour le coin supérieur gauche, la seconde pour le coin supérieur droit et inférieur à gauche, et la troisième valeur pour le coin inférieur droit. Le dernier style pour la tête 4 contient 4 valeurs pour la propriété Border-Radius: haut-gauche, haut-droit, bas à gauche et en bas à droite. Enregistrons et exécutons ce code.

Avec l'utilisation de différentes valeurs pour le radius frontalier, nous avons les titres modifiés sur la page Web illustrés ci-dessous. L'utilisation de la propriété Border-Radius avec 25 pixels a fait la courbe Border-Radius de tous les côtés pour la tête 1. Après cela, l'utilisation de la propriété Border-Radius avec 2 valeurs a affiché une courbe plus décrite pour les coins supérieur gauche et inférieur à droite par rapport aux coins supérieur et inférieur à gauche dans la tête 2. L'utilisation de trois valeurs pour la tête trois affiche le changement de bordure claire dans les coins supérieur droit et inférieur à gauche par rapport à d'autres côtés. Le dernier titre a montré le changement dans tous les coins.

Exemple 02:

Il est temps de créer un contour pour une frontière avec des courbes dans ses coins. Nous avons donc utilisé un total de 3 titres dans la balise «Body» d'une balise HTML. Les titres sont initialisés avec l'étiquette de cap «H1». La plus grande taille de taille à produire sur la page Web. Les trois titres sont spécifiés avec trois classes différentes: A, B et C. Ces classes seront utilisées dans la balise de style pour styliser les titres différemment.

Ainsi, dans la balise de style d'une balise «tête» dans le fichier HTML, nous avons spécifié les titres avec leurs classes pour les styliser séparément. Nous utilisons la propriété Border-Radius pour les trois titres tandis que le rayon a été réglé sur différentes valeurs pour les trois titres: 10px, 25px et 50px. Le rembourrage et la largeur pour les trois en-têtes ont été spécifiés avec les mêmes valeurs, respectivement 10px et 500px. Nous utilisons la propriété de hauteur pour les deux premiers titres, 40px chacun. Nous avons réglé la propriété d'arrière-plan pour le premier titre, fond de couleur verte.

La propriété de la frontière a été utilisée pour la 2e et la troisième tête pour spécifier l'épaisseur de la bordure, 5px. Son style est solide, et la couleur d'une bordure à générer. La propriété de contour des frontières n'a été utilisée que dans le troisième cap en créant un contour en pointillé de 5px d'épaisseur. Enregistrons et compilons ce code pour voir les modifications.

La sortie de ce code HTML a montré la première tête d'une légère petite courbe des coins sans bordure mince et remplie de couleur de fond vert. La bordure violette de la tête 2 est plus courte et le cap 3 contient une bordure avec un contour bleuâtre en pointillé.

Conclusion:

Ce guide démontre l'utilisation des frontières dans les codes HTML ainsi que leurs autres propriétés comme Border-Radius et contour. Nous avons discuté des exemples HTML pour coiffer les courbes d'une frontière à l'aide d'une propriété Border-Radius. Parallèlement à cela, nous avons vu comment nous pouvons remplir les frontières d'éléments spécifiques avec la propriété d'arrière-plan et créer des contours en dehors de la frontière en utilisant la propriété Outline. Tout au long de ces exemples, l'utilisation des propriétés de largeur, de hauteur et de rembourrage a été très bénéfique pour être utilisée dans le code.