Rayon CSS

La plupart du temps, nous avons tendance à mélanger la propriété de contour de HTML avec sa propriété frontalière. Alors que les deux propriétés sont assez diverses les unes des autres. La propriété frontalière peut occuper de l'espace supplémentaire. Le contour de tout élément ne peut pas prendre de place et peut également chevaucher d'autres éléments. Nous ne pouvons pas définir les côtés d'un contour pour un élément spécifique. Cependant, nous pouvons définir séparément les 4 côtés d'une frontière. De plus, vous ne pouvez pas modifier la taille ou la position de l'élément à l'aide d'un contour autour de lui. Le contour est toujours du côté extérieur de l'élément et la bordure est utilisée pour être le côté intérieur de l'élément. Nous représenterons l'utilisation de contour dans les codes HTML ainsi que la vérification de son rayon.

Exemple # 01:

Commençons par l'utilisation des frontières dans notre exemple. Après cela, nous prendrons un criet dans la propriété Outline. En utilisant la syntaxe de base de la création d'un fichier HTML, nous utilisons les balises HTML, tête, style et corps dans ce programme de code Visual Studio. Dans l'étiquette corporelle, nous avons utilisé deux titres avec l'utilisation des balises de cap de taille H1 et H2. Le H1 est le plus grand titre disponible et il peut être raccourci à H6- qui est la plus petite taille disponible. Le H1 contient un simple «exemple de bordure» de 2 mots ». Tandis que le H2 contient une longue phrase. Dans l'étiquette de style de la balise «tête», nous avons stylisé la tête «H2» en ajoutant une bordure de couleur bleue de 3 pixels dessus. Enregistrons ce code et exécutons-le dans le navigateur Google Chrome.

Après avoir exécuté ce code HTML du code Visual Studio dans n'importe quel navigateur, nous avons des résultats indiqués ci-dessous. Le premier titre a été considéré comme une simple rubrique sans aucun style. Tandis que le deuxième titre a été affiché avec la bordure solide de couleur bleue de 3 pixels autour.

Ajoutons une bordure et des contour. Nous utilisons le style de la rubrique H2 comme indiqué. Nous avons ajouté une ligne supplémentaire dans le style de H1 pour la création de contour. Ce contour sera en couleur verte et en pointillé. Chacun de ses points sera de 5 pixels comme spécifié. La bordure est déjà définie comme 2 pixels bleu massif. Économions et déboglons ce code HTML de Visual Studio et exécutons-le sur le navigateur.

La sortie du code HTML ci-dessus a affiché la page à faire affiché. La couleur bleue autour de l'on-tête «H2» montre la bordure solide tandis que la ligne en pointillés verts de taille 5 pixels a illustré le contour de la tête 2. Maintenant, vous pouvez voir la différence.

Exemple # 02:

Le contour peut également être solide, tout comme la frontière. Prenons un apparence à un autre exemple pour créer un nouveau contour solide. Nous avons donc utilisé le même fichier avec une petite différence par rapport au code ci-dessus. Dans ce fichier HTML, nous avons utilisé le même titre H1 de taille 1 et une balise «div» a été utilisée pour créer une nouvelle section dans la même page HTML. Vous pouvez ajouter plus d'un élément dans la section «div». En ce moment, nous avons ajouté la ligne de texte simple pour décrire la balise «div» ». Dans la balise de style de ce fichier HTML, nous avons utilisé le titre de balise «div» pour le style. Nous utilisons la propriété Outline pour que cela décrivait 3 pixels. Ce plan sera solide sans tirets ni points. Sa couleur sera «jaune-vert» comme spécifié dans la zone de style. La valeur «3px» a été utilisée pour spécifier la longueur d'un contour - quelle épaisseur ou mince. Enregistrons ce code et exécutons-le dans le navigateur pour voir les résultats.

Le contour de couleur jaune-vert de taille 3 pixels a été généré autour du côté extérieur de l'élément «div». Il ressemble beaucoup aux frontières bien que sa direction soit toujours vers l'extérieur.

Dans tous les exemples ci-dessus, nous avons couvert la création d'une bordure solide, d'un contour solide et d'un contour en pointillé dans le fichier HTML. Maintenant, nous allons créer un contour en pointillé autour de l'élément HTML. Nous avons essayé d'utiliser le même script HTML jusqu'à présent dans le code Visual Studio. Un seul changement que nous avons effectué dans la balise de style est l'utilisation du mot-clé «pointillé» au lieu de «solide» pour concevoir le contour de 3 pixels. De plus, nous avons changé la couleur du contour en «bleu-violet». Enregistrons simplement ce script HTML mis à jour et exécutons-le.

Après le débogage réussi de ce code HTML dans le code Visual Studio, il a été exécuté dans le navigateur Chrome et nous avons la sortie affichée ci-dessous. Le contour en pointillé bleu-violet a été généré autour de la section «div» de cette page statique HTML.

Exemple # 03:

Jetons un coup d'œil au rayon d'un contour dans le script HTML. Comme nous l'avons déjà discuté dans le paragraphe d'introduction, nous ne pouvons pas spécifier les valeurs de chaque côté du contour séparément comme nous pouvons le faire pour les frontières. Ainsi, dans le même fichier HTML, nous avons mis à jour la balise du corps et du style selon les besoins. Nous utilisons un total de 1 balise de cap «H1», 4 balises «div» et 3 balises de paragraphe «p».

Le titre sera de la plus grande taille («Exemple de contour») tandis que les 4 balises «div» contiennent 4 classes spécifiées «A», «B», «C» et «D» pour la création de 4 sections dans le Même page HTML. Les paragraphes sont restés vides juste pour le style. C'est pour la balise «corps». En utilisant les classes spécifiques de chaque balise «div», nous avons spécifié la propriété «contour» à l'intérieur. Il créera un contour bleu-violet en pointillés pour la 1ère et 3e section «div» et un contour bleu-violet «en pointillé» pour la 2ème et 4e étiquette «div». Tous ces contours seront de la même largeur, «4px». Nous avons utilisé la propriété «-moz-outline-radius» des contours pour définir les valeurs pour chaque côté du contour séparément. Nous avons réglé le rayon du côté gauche pour la div 1, le côté gauche / droit pour la div 2, gauche / droite / haut du côté pour Div 3 et les 4 côtés pour div 4. La largeur, la marge et le rembourrage pour les 4 sections «div» ont été les mêmes. Tissons le résultat de ce code maintenant.

Après l'exécution de ce code HTML, nous avons obtenu la même taille de 4 pixels pour toutes les sections. L'utilisation de la propriété Radius n'affecte pas la sortie tandis que la largeur a été mise à jour en utilisant la «largeur» de la section «div».

Conclusion:

Le paragraphe d'introduction a été utilisé pour démontrer la différence claire entre la propriété frontalière et la propriété de contour du style CSS en HTML. Dans les exemples que nous avons utilisés dans cette implémentation de cet article, nous avons discuté de la création de différents types de contours par rapport aux frontières ainsi que leurs différences. De plus, nous avons discuté de l'exemple pour montrer que le rayon d'un contour ne peut pas être modifié et cela dépend totalement de la frontière de l'élément pour la mettre en évidence et elle peut également se chevaucher.