Sommaire
Catégorie Bordure
Cette catégorie regroupe les propriétés relatives aux bordures de l’acteur.
🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule
Couleur de la bordure
this.properties.borderColor · string · défaut 'currentColor' · héritable · modifie : Style CSS
Couleur de bordure.
Cette propriété permet de spécifier la couleur de la bordure décorative de l’acteur.
La valeur attendue est :
- Soit une couleur native CSS ( la liste des couleurs est retrouvable à cette adresse.).
- Une couleur
RGBAau formatrgba(<rouge>,<vert>,<bleu>,<opacité>).
Il est possible de renseigner jusqu’à quatre valeurs dans le champ afin de définir différentes couleurs en fonction du côté souhaité.
Par défaut, la valeur est currentColor. C’est une instruction CSS qui permet d’utiliser la couleur actuelle du texte. Ainsi, si vous changez la couleur du texte, par défaut, la couleur de la bordure, si elle est visible, suivra automatiquement.
La valeur attendue est :
- Soit une couleur native CSS ( la liste des couleurs est retrouvable à cette adresse.).
- Une couleur
RGBAau formatrgba(<rouge>,<vert>,<bleu>,<opacité>).
Pour vous aider : Il est possible de retrouver la documentation de la couleur d’une bordure CSS à cette adresse.
Courbure des coins
this.properties.borderRadius · string · défaut '0px' · héritable · modifie : Style CSS
Arrondissement des coins. Voir information ici
Cette propriété permet de donner une courbure à la bordure décorative de l’acteur.
La valeur attendue est un nombre entier positif suivit de l’unité désirée (en général le suffixe px) Cette propriété régit la valeur de l’attribut CSS border-radius.
Il est possible de définir une courbure sur tous les coins de l’acteur. Ex :
10px. Ou bien des courbures différentes pour chaque coin :10px 5px 20px 0px.Règle :
<Haut gauche> <Haut droit> <Bas droit> <Bas gauche>
Pour vous aider : Nous avons ajouté une aide à la saisie, vous y trouverez les caractéristiques nécessaires pour gérer l’arondi des coins de la bordures
Pour y acceder, il suffit de cliquer ici : ↓ en rouge
Puis vous verrez apparaitre le pop-up suivant ↓
Il est possible de retrouver la documentation de l’attribut border-radius CSS à cette adresse.
Épaisseur de la bordure
this.properties.borderWidth · string · défaut '1px' · héritable · modifie : Taille
Épaisseur de bordure. Voir information ici
Cette propriété permet de spécifier l’épaisseur de la bordure décorative de l’acteur.
La valeur attendue est un nombre positif ou une chaine de caractères ( retrouvables dans la documentation ci-dessous ). L’unité par défaut est le pixel, cependant, cette unité peut être renseignée avec toute autre unité compatible.
Il est possible de renseigner jusqu’à quatre valeurs dans le champ afin de définir différentes tailles en fonction du côté souhaité.
Règle : <Haut> <Droit> <Bas> <Gauche>
Il est à noter que la taille de la bordure occupera de l’espace au sein de l’encadrement de l’acteur.
Pour vous aider : Nous avons ajouté une aide à la saisie, vous y trouverez les caractéristiques nécessaires pour gérer l’épaisseur de la bordure.
Pour y acceder, il suffit de cliquer ici : ↓ en rouge
Puis vous verrez apparaitre le pop-up suivant ↓
Il est possible de retrouver la documentation de l’épaisseur d’une bordure CSS à cette adresse.
Ombre portée
this.properties.boxShadow · string · défaut 'none' · héritable · modifie : Style CSS
Ombre portée. Voir information ici
Cette propriété permet de donner une ombre à la bordure décorative de l’acteur.
Cette propriété attend veux valeurs essentielles, et plusieurs valeurs optionnelles.
Exemple : ` box-shadow: A B C D E; `.
Dans cet exemple :
- A (Obligatoire) : est la position X de l’ombre projetée.
- B (Obligatoire) : est la position Y de l’ombre projetée.
- C (Optionnelle) : Permet de contrôler le flou appliqué sur l’ombre ( Plus la valeur est élevée plus l’ombre sera floue).
- D (Optionnelle) : Permet de contrôler la taille que va prendre l’ombre (Les valeurs négative diminuent la taille, tandis que les valeurs positives agrandissent la taille).
- E (Optionnelle) : Permet de donner la couleur à l’ombre projetée (Par défaut noire).
Les valeurs attendues pour les paramètres A,B,D sont des nombres positifs ou négatifs suivit de leur suffixe d’unité (px,em,etc …) La valeur attendue pour le paramètres C est un nombre positif suivit de son suffixe d’unité (px,em,etc …) La valeur attendue pour le paramètres E est une couleur ou un code RGB. Un aide pour la liste native des couleurs en CSS peut être trouvée à cette adresse.
Pour vous aider : Nous avons ajouté une aide à la saisie, vous y trouverez les caractéristiques nécessaires pour gérer l’ombre de la bordures
Pour y acceder, il suffit de cliquer ici : ↓ en rouge
Puis vous verrez apparaitre le pop-up suivant ↓
Il est possible de retrouver la documentation de l’attribut Bos-Shadow CSS à cette adresse.
Style de la bordure
this.properties.borderStyle · string · défaut 'none' · héritable · modifie : Taille
Style de bordure.
Cette propriété permet d’ajouter une bordure décorative au contenu de l’acteur.
L’inspecteur propose quatre style de bordure différentes :
- Ligne continue
- Trait
- Pointillés
- Double ligne continue
