Bordure en pointillés CSS. Cadres et limites. Limites pour les partis individuels
Je suis sûr que vous connaissez déjà la propriété border css. Allez-vous apprendre quelque chose de nouveau que vous ne saviez pas auparavant sur la frontière CSS ? Eh bien, non seulement vous apprendrez, mais vous verrez également plusieurs nouvelles choses que vous n'aviez jamais connues auparavant !
Non seulement CSS3 peut être utilisé pour créer des coins arrondis, mais du code CSS pur peut également être utilisé pour créer formes complexes. Auparavant, vous pouviez utiliser background-image pour donner l'apparence de coins arrondis. Grâce aux nouvelles techniques d'utilisation des bordures, nous pouvons le faire avec du code CSS pur.
Bases de l'utilisation de la bordure CSS
Vous connaissez probablement déjà utilisation standard propriétés de bordure :
Bordure : 1px noir uni ;
Le code ci-dessus affichera une bordure de 1 px qui sera noire. Facile et simple. Vous pouvez également étendre un peu la syntaxe :
Largeur de bordure : épaisse ; style de bordure : solide ; couleur de la bordure : noir ;
En complément, vous pouvez utiliser des valeurs spécifiques pour la propriété border-width, trois mots-clés : Thin, Medium, Thick.
Mais utiliser la syntaxe étendue n’est pas toujours pratique. Regardons un exemple où vous devez changer la couleur d'un cadre de bloc lorsque vous survolez la souris. Dans ce cas, utiliser la syntaxe abrégée est beaucoup plus simple :
Box ( bordure : 1 px rouge uni ; ) .box:hover ( bordure : 1 px vert uni ; )
Une manière plus élégante et plus simple de procéder est la suivante :
Box ( bordure : 1px rouge uni ; ) .box:hover ( border-color : vert ; )
Comme vous pouvez le constater, la technique avancée est également utile lorsque l'on modifie uniquement certaines propriétés : largeur, style, couleur et autres.
Rayon de frontière
Frontière-rayon- C'est la propriété "en or" de CSS3 - la première propriété la plus courante devenue pratique et utile. À l'exception d'IE8 et des versions inférieures, tous les navigateurs affichent coins arrondis en utilisant ceci.
Cependant, il est nécessaire d'utiliser des préfixes spéciaux pour Webkit et Mozilla pour que le style soit correct.
Rayon de bordure du kit Web : 10 px ; -moz-border-radius : 10px ; rayon de bordure : 10 px ;
De nos jours, nous pouvons supprimer les préfixes spéciaux et utiliser formulaire standard rayon-frontière.
Un autre avantage est que nous pouvons utiliser des valeurs spéciales pour chaque côté du bloc :
Rayon de la bordure supérieure gauche : 20 px ; rayon de bordure en haut à droite : 0 ; bordure en bas à droite : 30 px ; bordure inférieure gauche : 0 ;
Dans le code ci-dessus, définir border-top-right-radius et border-bottom-left-radius sur "null" peut obtenir des formes étonnantes. Bien que l'élément puisse hériter de certaines propriétés qui devront être réinitialisées.
Semblable à margin et padding, nous pouvons compresser la syntaxe :
/* en haut à gauche, en haut à droite, en bas à droite, en bas à gauche */ border-radius: 20px 0 30px 0;
À titre d'exemple d'utilisation de la propriété border-radius, je vais vous montrer un « citron » que les concepteurs utilisent souvent lors de la conception de sites Web :
Citron (largeur : 200 px ; hauteur : 200 px ; arrière-plan : #F5F240 ; bordure : 1 px solide #F0D900 ; rayon de bordure : 10 px 150 px 30 px 150 px ; )
Allons au-delà des bases
Pour de nombreux concepteurs, toutes les connaissances dans le domaine des propriétés de bordure CSS s'arrêtent ici. Mais il existe d’autres choses sympas que vous pouvez utiliser pour créer des choses étonnantes !
Structures de bordure CSS complexes
Il existe de nombreuses techniques pour créer des designs en utilisant structures complexes frontière. Par exemple, regardons ce qui suit...
Style de bordure
Nous utilisons toujours les propriétés les plus connues : solide, pointillé et pointillé. Mais il existe quelques autres propriétés de style bordure : rainure et crête.
Bordure : rainure de 20 px #e3e3e3 ;
Ou en syntaxe étendue :
Couleur de la bordure : #e3e3e3 ; largeur de bordure : 20 px ; style de bordure : rainure ;
Bien que ces propriétés soient utiles, elles ne constituent pas la base de la création de cadres complexes.
Contour
La technique la plus populaire pour créer une double bordure consiste à utiliser la propriété outline.
Boîte (bordure : 5px solide #292929 ; contour : 5px solide #e3e3e3 ; )
Cette méthode fonctionne très bien, même si elle nous limite à seulement deux images. Parfois, vous devez créer une bordure dégradée composée de plusieurs calques... comment alors ?
Pseudo-éléments
Lorsque la technique du contour n'est pas suffisante, une solution alternative consiste à utiliser les pseudo éléments : avant et : après. Avec lequel vous pouvez ajouter cadres supplémentairesà l'élément :
Boîte ( largeur : 200 px ; hauteur : 200 px ; arrière-plan : #e3e3e3 ; position : relative ; bordure : 10 px vert uni ; ) /* Créer deux boîtes avec la même largeur que le conteneur */ .box:after, .box:before ( contenu : "" ; position : absolue ; gauche : 0 ; .box:after (bordure : 5px jaune uni ; ) .box:before (bordure : 10px bleu uni)
Cela n'a pas l'air très élégant, mais au moins, Ça marche. C'est un peu difficile de comprendre la séquence de couleurs dans les cadres... mais vous pouvez comprendre.
Boîte-Ombre
Une « manière pour les enfants » intéressante de créer cet effet consiste à utiliser la propriété CSS3 box-shadow :
Boîte (bordure : 5px rouge uni ; ombre de la boîte : 0 0 0 5px vert, 0 0 0 10px jaune, 0 0 0 15px orange ; )
Dans ce cas, nous avons été plus intelligents et avons utilisé une propriété box-shadow dédiée. En changeant les paramètres x, y, flou à "null", nous pouvons utiliser différentes couleurs pour créer plusieurs cadres.
Mais il y a un problème : dans les anciens navigateurs qui ne comprennent pas la propriété box-shadow, un seul cadre rouge de 5 pixels sera visible.
"Souviens-toi! La conception du site doit être identique sur tous les navigateurs. Y compris les anciennes versions."
Changer d'angle
En plus de celui utilisé sens simple border-radius, nous pouvons en spécifier deux distincts - en les séparant par / nous indiquerons le rayon horizontal et vertical.
Par exemple:
Rayon de bordure : 50 px / 100 px ; /* rayon horizontal, rayon vertical */
... cela équivaut à :
Rayon de la bordure supérieure gauche : 50 px 100 px ; rayon de bordure en haut à droite : 50px 100px ; bordure en bas à droite : 50 px 100 px ; bordure-bas-gauche-radius : 50px 100px ;
Cette technique convient pour créer des formes de blocs uniques. Par exemple, voici comment créer un effet de papier enveloppé :
Boîte (largeur : 200 px ; hauteur : 200 px ; arrière-plan : #666 ; bordure-radius supérieur-gauche : 15em 1em ; bordure-radius-inférieur-droit : 15em 1em ; )
Formulaires CSS utilisant une bordure
Cette technique montre comment créer des formulaires CSS, tout en utilisant des éléments avec des dimensions nulles en hauteur et en largeur. Surpris? Regardons un exemple...
Pour les prochains exemples, nous utiliserons le balisage suivant :
...et le style de base suivant :
Boîte (largeur : 200 px ; hauteur : 200 px ; arrière-plan : noir ; )
La plupart exemple courant en utilisant CSS formes - créant une flèche fluide. Le secret de cette flèche réside dans la création d’une bordure avec une couleur différente pour chaque côté. Puis on met attributs de largeur et hauteur à 0.
Attribuons la classe arrow au bloc div :
Flèche (largeur : 0 ; hauteur : 0 ; bordure supérieure : 100 px rouge uni ; bordure droite : 100 px vert uni ; bordure inférieure : 100 px bleu uni ; bordure-gauche : 100px jaune uni ; )
Pour démontrer, nous utilisons d’abord la syntaxe étendue. Ensuite, nous pouvons supprimer le code supplémentaire en utilisant la syntaxe abrégée :
Flèche (largeur : 0 ; hauteur : 0 ; bordure : 100 px solide ; couleur de la bordure : rouge vert bleu jaune ; )
Intéressant, n'est-ce pas ? Nous allons maintenant définir des couleurs transparentes sur tous les côtés sauf le côté bleu.
Flèche (largeur : 0 ; hauteur : 0 ; bordure : 100 px solide ; couleur de la bordure : bleu ; )
Cela s'est avéré génial ! Mais cela contredit disposition sémantique , créez un div .arrow, juste pour ajouter une flèche à la page. Pour cela, nous pouvons utiliser des pseudo-éléments, ce que nous allons faire maintenant.
Créer une bulle de dialogue
Pour créer une bulle, nous avons besoin d'un petit morceau CSS pur code et un bloc div.
Bulle de dialogue ( position : relative ; couleur d'arrière-plan : #292929 ; largeur : 200 px ; hauteur : 150 px ; hauteur de ligne : 150 px ; /* centre vertical */ couleur : blanc ; alignement du texte : centre ; )
Bulle :après ( contenu : ""; )
A ce stade, nous allons créer la flèche que nous avons réalisée précédemment, l'ajouter à l'élément et il ne reste plus qu'à la positionner :
Bulle : après (contenu : " ; position : absolue ; largeur : 0 ; hauteur : 0 ; bordure : 10 px solide ; couleur de la bordure : rouge vert bleu jaune ; )
Si nous voulons que la flèche pointe vers le bas, nous devrons définir toutes les bordures comme transparentes sauf celle du haut.
Bulle : après ( contenu : " ; position : absolue ; largeur : 0 ; hauteur : 0 ; bordure : 10 px solide ; couleur de la bordure supérieure : rouge ; )
Quand nous créons ceci Forme CSS, nous ne pouvons pas indiquer spécifiquement la taille de la flèche. Au lieu de cela, nous pouvons définir la propriété border-width, qui attribuera une taille à la flèche. Nous définirons également la position de la flèche en bas au milieu. En conséquence, pour cela, nous utilisons les valeurs en haut et à gauche.
Bulle : après ( contenu : " ; position : absolue ; largeur : 0 ; hauteur : 0 ; bordure : 15 px solide ; couleur de la bordure supérieure : rouge ; haut : 100 % ; gauche : 50 % ; )
De plus, il suffit de lui donner une couleur identique à celle du bloc. N'oubliez pas que lors du positionnement, vous devez prendre en compte la taille des autres bordures, qui sont invisibles (15px). Nous donnerons également au bloc des arrondis dans les coins.
Bulle de dialogue ( /* … autres styles */ border-radius: 10px; ) .speech-bubble:after ( contenu: ""; position: absolue; largeur: 0; hauteur: 0; bordure: 15px solide; bordure supérieure -couleur : #292929 ; haut : 100 % ; marge gauche : -15px ; /* ajuster la largeur de la bordure */ )
Pas mal, hein ? En utilisant plusieurs classes CSS et astuces de bordure, vous pouvez créer une telle chose.
/* Utilisation des bulles : appliquez les classes .speech-bubble et .speech-bubble-DIRECTION comme indiqué ci-dessous
Prime! Centrage vertical dans le bloc
Pour une ligne de texte, vous pouvez utiliser la hauteur de ligne. Mais si vous avez deux lignes de texte ou plus... La meilleure solution va installer propriété d'affichage sur la table et mettez tout le texte dans un paragraphe. Voilà à quoi ça ressemble sur balisage HTML:
Bulle vocale ( /* autres styles */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Nous ne nous limitons pas aux triangles. CSS est capable de restituer différentes formes- même des cœurs et un signe de risque biologique.
Biohazard (largeur : 0 ; hauteur : 0 ; bordure : 60 px solide ; rayon de bordure : 50 % ; couleur de la bordure supérieure : noir ; couleur de la bordure inférieure : noir ; couleur de la bordure gauche : jaune ; bordure droite- couleur : jaune)
Conclusion
Vlad Merjevitch
AVEC en utilisant CSS Vous pouvez ajouter une bordure à un élément de plusieurs manières. Fondamentalement, bien sûr, la propriété border est utilisée, comme la plus universelle, ainsi que outline et, étonnamment, box-shadow , dont la tâche principale est de créer une ombre. Nous examinerons ensuite ces méthodes et leurs différences entre elles.
propriété de contour
La propriété la plus simple pour créer des cadres. Il a les mêmes paramètres que border , mais diffère considérablement sur certains détails :
- le contour est affiché autour de l'élément (bordure à l'intérieur) ;
- le contour n'affecte pas les dimensions de l'élément (une bordure est ajoutée à la largeur et à la hauteur de l'élément) ;
- le contour ne peut être défini qu'autour de l'élément entier, mais pas sur partis individuels ah (la bordure peut être utilisée pour n'importe quel côté ou tout à la fois) ;
- le contour n'est pas affecté par le rayon d'arrondi, spécifié par propriété border-radius (affecte la bordure).
La question se pose : dans quels cas un contour est-il nécessaire, lorsque son rôle, malgré les différences énumérées, est entièrement assumé par la frontière ? Il n'y a pas beaucoup de situations, mais elles surviennent :
- créer des cadres multicolores complexes ;
- ajouter un cadre à un élément lorsque vous passez la souris dessus ;
- masquer la bordure que le navigateur ajoute automatiquement à certains éléments lors de la réception du focus ;
- pour le contour, vous pouvez définir la distance entre le bord de l'élément et le cadre à l'aide de la propriété outline-offset, pour créer .
Cadres multicolores
Vous devez comprendre que le contour ne remplace en aucun cas la bordure et peut très bien exister avec elle, comme le montre l'exemple 1.
Exemple 1 : Création d'un cadre
Dans cet exemple, un cadre noir est ajouté autour de l'élément, qui est séparé de l'arrière-plan par une bordure blanche (Fig. 1).
Riz. 1. Cadre autour de l'élément
Cadre lors de l'utilisation : survol
Lors de l'ajout d'un cadre via border, la largeur de l'élément augmente, ce qui est assez visible lors de la combinaison de border et de la pseudo-classe :hover. Il y a deux façons de « gagner » cela. Le plus simple est de remplacer border par outline , ce qui, comme on le sait, n'affecte pas la taille de l'élément (exemple 2).
Exemple 2 : cadre en survol
le contour n’est pas toujours adapté, ne serait-ce que parce que l’arrondi des coins ne l’affecte pas. La deuxième méthode convient ici : ajoutez un cadre invisible ou un cadre qui correspond à la couleur d'arrière-plan, puis modifiez ses paramètres au survol (exemple 3). Aucun déplacement de l'élément ne se produira alors, puisque le cadre existe déjà initialement. Mais on se souvient toujours que la largeur de l'élément est la somme des valeurs de width , border à gauche et border à droite. La situation est similaire avec la hauteur.
Exemple 3 : cadre en survol
Bordure autour des champs du formulaire
Dans certains navigateurs (Chrome, Safari, dernières versions Opera), une petite icône s'affiche autour des champs de formulaire lorsqu'ils reçoivent le focus. cadre de couleur(Fig.2). Pour le supprimer, ajoutez simplement la valeur none à la propriété outline dans les styles, comme indiqué dans l'exemple 4.
Riz. 2. Cadre autour des marges
Exemple 4. Retrait du cadre
Cadres via box-shadow
Bien que la propriété box-shadow soit destinée à ajouter une ombre autour d'un élément, elle peut également être utilisée pour créer des bordures qui ne peuvent pas être créées à l'aide de border ou outline . Tout cela est dû au fait que le nombre d'ombres peut être illimité, dont les paramètres sont répertoriés séparés par des virgules.
Pour obtenir un cadre, les trois premiers paramètres doivent être mis à zéro ; ils sont responsables de la position de l'ombre et de son flou. Le quatrième paramètre dans dans ce cas est responsable de l'épaisseur de la bordure et le cinquième définit la couleur de la bordure. Pour le deuxième cadre, le quatrième paramètre est égal à la somme des épaisseurs des deux cadres.
L'exemple 4 montre comment ajouter deux cadres et une bordure à droite à l'aide d'une seule propriété box-shadow.
Exemple 4 : Utilisation de box-shadow
Résultat cet exemple montré sur la fig. 3.
Riz. 3. Cadres créés par la propriété box-shadow
Quelques leçons plus tôt, nous avons examiné une représentation schématique d'un bloc de page Web et avons également brièvement parlé de la propriété CSS border , qui peut être utilisée pour définir les bordures d'un élément. Cette fois, nous examinerons cette propriété plus en détail à l’aide d’exemples.
La bordure est située entre la marge et le remplissage. Cela signifie que la marge est pour frontière. La bordure peut être placée sur les quatre côtés (comme pour enfermer le bloc dans un cadre), ou sur un, deux ou trois côtés. CSS vous permet de contrôler l'épaisseur, la couleur et le style des bordures. Étudions cela plus en détail.
Largeur de bordure : largeur de bordure
La propriété border-width définit la largeur de la bordure. Le plus souvent cette taille est indiquée en pixels. Vous pouvez définir des largeurs identiques ou différentes pour les quatre bordures, par exemple :
/* les 4 bordures font 2px de large : */ border-width: 2px; /* les bordures supérieure et inférieure font 2px de large, gauche et droite font 4px : */ border-width: 2px 4px; /* bordure supérieure - 2px, gauche et droite - 6px, inférieure - 3px : */ border-width : 2px 6px 3px; /* bordure supérieure - 2px, droite - 3px, inférieure - 4px, gauche - 5px : */ border-width : 2px 3px 4px 5px;
De plus, il existe des mots-clés pour indiquer la largeur de la bordure :
- mince - bordure de 2 pixels de large ;
- moyen - bordure de 4 pixels de large ;
- épais - bordure de 6 pixels de large.
Couleur de la bordure : couleur de la bordure
La propriété border-color spécifie la couleur des bordures. Les couleurs peuvent être spécifiées dans n'importe quel format CSS : mots-clés, en hexadécimal ou RVB - cela dépend de ce qui vous convient le mieux. Par analogie avec la propriété précédente, vous pouvez définir une couleur pour toutes les bordures ou sélectionner des couleurs différentes pour chaque bordure.
Couleur de la bordure : #FFFF00 ;
Vous pouvez également définir couleur transparente, en écrivant:
Couleur de la bordure : transparente ;
Style de bordure : style de bordure
Grâce à la propriété border-style, vous pouvez transformer une bordure régulière en une bordure pointillée, double ou tridimensionnelle - il en existe de nombreuses différentes significations. Pour ce faire, utilisez les mots-clés suivants :
- solide - bordure pleine ;
- pointillé - bordure de points ;
- pointillé - bordure en pointillés ;
- double - double bordure ;
- rainure - limite d'encoche volumétrique ;
- crête - une bordure volumineuse avec un bord épais (essentiellement une inversion du style précédent) ;
- début - bordure extrudée ;
- encart - une bordure en retrait (essentiellement une inversion du style précédent).
Comme pour les propriétés border-width et border-color, chaque bordure de bloc peut être stylisée différemment - par exemple, vous pouvez faire en sorte que le haut et la limite inférieure pointillé, et à droite et à gauche - double. Ici, tout ne dépend que de l'imagination.
Style de bordure : double pointillé ;
Veuillez noter: V différents navigateurs apparence les limites peuvent être légèrement différentes.
Bordure de propriété CSS commune : 3 en 1
Pour styliser une bordure, vous n’êtes pas obligé d’utiliser tour à tour les trois propriétés ci-dessus. Il suffit de connaître la propriété universelle générale border CSS, avec laquelle vous écrirez un style beaucoup plus rapidement et économiserez de l'espace. Pour ce faire, notez les valeurs des trois propriétés dans un ordre aléatoire :
Bordure : 2px en pointillés #FF0000 ;
Limites pour les partis individuels
En utilisant les propriétés de bordure supplémentaires en CSS, vous pouvez styliser chaque bordure de bloc individuellement. Les propriétés suivantes vous y aideront :
- border-top - style pour la bordure supérieure ;
- border-right - pour la bordure droite ;
- border-bottom - pour la bordure inférieure ;
- border-left - pour la bordure gauche.
Résultats
Maintenant que vous savez comment créer des bordures pour les blocs, vous pouvez vous entraîner à les créer. Il existe de nombreuses façons de décrire un style de manière concise sans trop de lignes. Fichier CSS. La connaissance des principes des feuilles de style en cascade joue ici un rôle important. Regardons un exemple.
Disons que vous souhaitez créer un cadre pour bloc div avec trois bordures grises unies et la bordure inférieure pointillée de vert. Vous pouvez écrire ce style comme ceci :
Div ( bordure droite : 8 px double #FF0000 ; bordure gauche : 8 px double #FF0000 ; bordure inférieure : 8 px double #FF0000 ; bordure supérieure : 4 px pointillé #FDD201 ; )
Mais c'est un post trop long. Tout cela peut s’écrire brièvement :
Div ( bordure : 8px double #FF0000 ; bordure supérieure : 4px pointillé #FDD201 ; )
Comme mentionné ci-dessus, nous profiterons ici des propriétés en cascade du CSS. Nous écrivons d'abord le style pour les quatre côtés du cadre, puis spécifions le style séparément pour la bordure inférieure, écrasant ainsi partiellement le style précédent. Il est très important de suivre cette séquence de lignes.
Mini-tâche
Essayez de créer une bordure pour le div avec des dimensions de 200 x 200 pixels. Les styles du cadre devraient être comme ceci :
- Rendre les bordures supérieure et inférieure solides solide, donnez-leur la même couleur de choix et une largeur de 5 pixels.
- Faire la bordure gauche en pointillés, 3 pixels de large, choisissez une couleur différente de la précédente.
- Faire doubler la bordure droite double, 7 pixels de large, couleur différente des deux précédentes.
Au final, votre travail devrait ressembler à ceci (sauf pour la couleur que vous choisissez) :
Résultat de la tâche (affichage dans Chrome)
Dans l'article précédent, nous avons discuté appliquer CSS Propriétés border() des éléments de page. Et je vous ai promis de vous expliquer comment utiliser des images pour dessiner des bordures. C'est de cela dont nous parlerons aujourd'hui.
Pour utiliser des images pour créer des bordures, nous utiliserons la propriété CSS border-image.
L'épaisseur des bordures est définie par la propriété, et si border: 0 est spécifié, alors la bordure n'est pas affichée. Avec d'autres valeurs de bordure, l'image est toujours prioritaire. L'arrière-plan, s'il est spécifié via la propriété background, est affiché sous le cadre.
Syntaxe du code
Regardons un exemple d'enregistrement de propriété :
| border-image : url (images/bg-image.png ) 30 tours ; |
url (images/bg-image.png) — adresse de l'image d'arrière-plan.
30 - il peut y avoir une, deux, trois ou quatre valeurs qui indiquent les tailles des parties de l'image en pixels, définissant ainsi les zones de division de l'image. Les unités elles-mêmes ne sont pas écrites, juste le nombre (10, pas 10px). Sur la figure, les lignes rouges mettent en évidence les zones nécessaires à la création du cadre.
Vous pouvez utiliser une, deux, trois ou quatre valeurs, séparées par un espace. L'effet dépend du nombre de valeurs et est indiqué dans le tableau.
round round — deux paramètres (pour les bordures horizontales et verticales, respectivement). Peut prendre l’une des trois valeurs suivantes. Le résultat est visible sur les photos.
extensible— Étire le dessin de la bordure à la taille de l'élément. Il s'agit de la valeur par défaut.
répéter— Répète le motif de bordure.
rond— Répète le dessin et le met à l'échelle de manière à ce qu'il y ait un nombre entier d'images du côté de l'élément.
Compatibilité du navigateur
Malheureusement, toutes les versions de navigateur ne prennent pas en charge la propriété border-image. Pour une meilleure compatibilité, il est conseillé d'enregistrer la propriété pour tous les navigateurs.
Exemple de code :
| style de bordure : solide ; |
largeur de la bordure : 27 px ;
-moz-border-image : url (http://mysite.ru/border.png) tronçon de 27 tours ;
-webkit-border-image : url (http://mysite.ru/border.png) tronçon de 27 tours ; -o-border-image : url (http://mysite.ru/border.png) tronçon de 27 tours ; border-image : url (http://mysite.ru/border.png) tronçon de 27 tours ;
Automation
Il existe des outils sur le Web qui nous aident à écrire du code. Il existe un constructeur très pratique pour la propriété border-image. Il vous suffit d'y télécharger votre image de bordure (d'ailleurs, vous pouvez en trouver beaucoup sur Internet). À l'aide des curseurs, divisez l'image en zones, définissez l'épaisseur de la bordure et les paramètres de répétition.
Conclusion
D’ailleurs, immédiatement, dans