Michael 2016-06-11 1 HTML et CSS 0

Comment se fait la double bordure en css ?

Bonjour à tous. Savez-vous comment doubler la frontière en css ? Sinon, veuillez lire cette petite note. Le fait est que vous ne pouvez pas faire cela avec la bordure habituelle, ici vous devez aller dans l'autre sens.

Si vous spécifiez une bordure à l'aide de la propriété border, vous ne pouvez en spécifier qu'une. Mais très souvent, une conception peut nécessiter plusieurs cadres. Dans ce cas, vous devez utiliser un pseudo-cadre - une ombre.

Double bordure avec box-shadow

De manière générale, si vous souhaitez en savoir plus sur l'ombre en css, alors je vous conseille de lire sur le sujet concerné. Dans cet article, je n'expliquerai pas en détail la syntaxe de la propriété, mais je vous montrerai simplement une astuce pour créer une double bordure. Créons donc un bloc ordinaire auquel j'attribuerai des styles. Le bloc peut être n'importe quel et avec n'importe quel contenu. Dans mon cas, c'est un simple div, donc je ne montrerai même pas le code html. Et voici les styles :

Div (
arrière-plan : # E0D8A3 ;
largeur : 180px ;
hauteur : 110px ;
rembourrage : 12px ;
}

Eh bien, un exemple typique de conception de blocs.
Créons maintenant une double bordure en utilisant plusieurs ombres portées. J'ajouterai la propriété suivante aux styles du bloc :

Boîte-ombre : 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;

Voilà à quoi ça ressemble :

Comme vous pouvez le voir, cela s'est plutôt bien passé. Il n'y a que 5 paramètres dans box-shadow. Le premier est le déplacement horizontal de l'ombre, le second est le déplacement vertical. Les troisième et quatrième paramètres sont le flou et l'étirement. Comme vous pouvez le voir, on ne touche pas du tout aux trois premiers. Nous n'avons pas besoin de flou car nous voulons une ombre nette. Comme vous pouvez le voir, j'ai prescrit le quatrième paramètre - l'étirement. Il détermine à quel point l'ombre sera plus grande que l'élément auquel elle est attachée.

Par défaut, tout ressemble à ceci - l'ombre a la même taille que l'élément et se trouve clairement en dessous. Si vous modifiez l'étirement, l'ombre commence à dépasser de l'élément. C'est ainsi que vous pouvez créer des bordures, exactement de la même manière qu'avec la propriété border. Eh bien, avec le cinquième paramètre, je pense que tout est clair - c'est la couleur de l'ombre.

Comme vous pouvez le voir, je viens de lister les paramètres de chaque nouvelle ombre, séparés par des virgules. Je pense que vous avez déjà deviné que vous pouvez créer une triple bordure, etc. de la même manière. Il n'y a aucune restriction ici. En fait, quant à moi, la question est fermée, mais si vous avez des questions, vous pouvez les écrire dans les commentaires.

Juste un instant de votre attention : Nous souhaitons tous héberger nos sites sur un hébergement fiable. J'ai analysé des centaines d'hébergements et trouvé le meilleur - HostIQ Il y a des centaines de critiques positives à son sujet en ligne, la note moyenne des utilisateurs est de 4,8 sur 5. Que vos sites soient heureux.

Vlad Merjevich

Avec 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 contour et, étonnamment, box-shadow, dont la tâche principale est de créer une ombre. Ensuite, nous examinerons ces méthodes et leurs différences entre elles.

Propriété de contour

La propriété la plus simple pour créer des cadres. Possède les mêmes paramètres que border, mais en diffère considérablement par certains détails :

• le contour est dessiné autour de l'élément (la bordure est à l'intérieur);
• le contour n'affecte pas les dimensions de l'élément (la bordure est ajoutée à la largeur et à la hauteur de l'élément) ;
• le contour ne peut être défini que autour de l'élément entier, pas sur des côtés individuels (la bordure peut être utilisée sur n'importe quel côté ou tout à la fois) ;
• le contour n'est pas affecté par le rayon d'arrondi défini par la propriété border-radius (la bordure est affectée).

La question se pose - dans quels cas le contour est-il nécessaire, lorsque son rôle, malgré les différences énumérées, est pleinement assumé par la frontière? Il n'y a pas tellement de situations, mais elles se produisent :

• création de cadres multicolores complexes;
• ajouter une bordure à un élément lorsque vous le survolez avec le curseur de la souris ;
• masquer automatiquement le cadre ajouté par le navigateur pour certains éléments lorsqu'ils reçoivent le focus ;
• pour un contour, vous pouvez définir la distance entre le bord d'un élément et le cadre à l'aide de la propriété outline-offset pour créer.

Cadres multicolores

Il faut comprendre que le contour ne remplace en aucun cas la bordure et peut bien exister avec elle, comme le montre l'exemple 1.

Exemple 1. Création d'un cadre

Dans cet exemple, une bordure noire est ajoutée autour de l'élément, qui est séparée de l'arrière-plan par une bordure blanche (Fig. 1).

Riz. 1. Cadre autour de l'élément

Cadre lors de l'utilisation : survolez

L'ajout d'une bordure par bordure augmente la largeur de l'élément, ce qui est assez visible lors de la combinaison de bordure et de la pseudo-classe : hover. Il y a deux façons de "gagner" cela. Le plus simple est de remplacer border par un contour, dont on sait qu'il n'a aucun effet sur les dimensions de l'élément (exemple 2).

Exemple 2. Bordure au survol

le contour n'est pas toujours adapté, ne serait-ce que parce que l'arrondi des angles ne l'affecte pas. Ici, la deuxième méthode convient - ajoutez un cadre ou un cadre invisible qui correspond à la couleur d'arrière-plan, puis modifiez ses paramètres au survol (exemple 3). Alors aucun déplacement de l'élément ne se produira, puisque le cadre existe déjà depuis le début. Mais rappelez-vous toujours que la largeur de l'élément est la somme des valeurs de largeur, bordure à gauche et bordure à droite. La situation est similaire avec la hauteur.

Exemple 3. Cadre au survol

Bordure autour des champs de formulaire

Dans certains navigateurs (Chrome, Safari, les dernières versions d'Opera), une petite bordure colorée apparaît autour des champs du formulaire lorsqu'ils reçoivent le focus (Figure 2). Pour le supprimer, ajoutez simplement la valeur none à la propriété outline dans les styles, comme illustré dans l'exemple 4.

Riz. 2. Cadre autour des champs

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 faites avec une bordure ou un contour. 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 le 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 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 la somme des épaisseurs des deux cadres.

L'exemple 4 montre comment ajouter deux bordures et une bordure à droite en utilisant une propriété box-shadow.

Exemple 4. Utilisation de box-shadow

Le résultat de cet exemple est montré dans la Fig. 3.

Riz. 3. Cadres créés par la propriété box-shadow

La description

La propriété générique de bordure vous permet de définir l'épaisseur, le style et la couleur de la bordure autour d'un élément en même temps. Les valeurs peuvent aller dans n'importe quel ordre, séparées par un espace, le navigateur déterminera laquelle d'entre elles correspond à la propriété souhaitée. Pour définir la bordure uniquement sur certains côtés d'un élément, utilisez les propriétés border-top, border-bottom, border-left, border-right.

Syntaxe

Les valeurs

La valeur border-width détermine l'épaisseur de la bordure. Plusieurs valeurs de style bordure sont fournies pour contrôler son apparence. Leurs noms et le résultat de l'action sont montrés dans la Fig. 1.

Fig. 1. Styles de cadre

border-color définit la couleur de la bordure, la valeur peut être dans n'importe quel format CSS valide.

inherit hérite de la valeur du parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

Cet exemple ajoute une double bordure autour du calque. Le résultat est montré dans la Fig. 2.

Riz. 2. Application de la propriété border

Modèle d'objet

document.getElementById ("elementID") .style.border

Navigateurs

Internet Explorer jusqu'à et y compris la version 6 s'affiche en pointillés avec une épaisseur de bordure de 1px. Si l'épaisseur est de 2px ou plus, la valeur en pointillé fonctionne correctement. Ce bogue est corrigé dans IE7, mais uniquement pour toutes les bordures 1px. Si l'une des bordures de la boîte a une épaisseur de 2 pixels ou plus, dans IE7, la valeur en pointillé devient en pointillé.

Internet Explorer jusqu'à et y compris la version 7.0 ne prend pas en charge la valeur d'héritage.

Le style de bordure peut varier légèrement d'un navigateur à l'autre lors de l'utilisation de valeurs de rainure, de crête, d'encart ou de départ.

La description

Définit le style de la bordure autour de l'élément. Il est permis de définir des styles individuels pour les différents côtés d'un élément.

Syntaxe

border-style: (1,4) | hériter

Les valeurs

Plusieurs valeurs de propriété de style bordure sont fournies pour contrôler l'apparence de la bordure. L'apparence dépend du navigateur utilisé et de l'épaisseur de bordure spécifiée. Table 1 montre les noms des styles et le cadre résultant à différentes valeurs d'épaisseur - 1, 3, 5 et 7 pixels.

En plus des valeurs répertoriées dans le tableau, les mots-clés suivants sont utilisés.

Aucun N'affiche pas la bordure et sa largeur (border-width) est définie sur zéro. hidden A le même effet que none, sauf pour appliquer un style de bordure aux cellules de tableau dont la propriété border-collapse est définie sur collapse. Dans ce cas, la bordure autour de la cellule ne s'affichera pas du tout. inherit Hérite la valeur du parent.

Il est permis d'utiliser une, deux, trois ou quatre valeurs, en les séparant par un espace. L'effet dépend de la quantité et est indiqué dans le tableau. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Le résultat de cet exemple est montré dans la Fig. 1.

Riz. 1. Application de la propriété border-style

Modèle d'objet

document.getElementById ("elementID") .style.borderStyle

Navigateurs

Internet Explorer jusqu'à et y compris la version 6 s'affiche en pointillés avec une épaisseur de bordure de 1px. Si l'épaisseur est de 2px ou plus, la valeur en pointillé fonctionne correctement. Ce bogue est corrigé dans IE7, mais uniquement pour toutes les bordures 1px. Si l'une des bordures de la boîte a une épaisseur de 2 pixels ou plus, dans IE7, la valeur en pointillé devient en pointillé.

Internet Explorer jusqu'à la version 7.0 incluse ne prend pas en charge les valeurs masquées et héritées.

Le style de bordure peut varier légèrement d'un navigateur à l'autre lors de l'utilisation de valeurs de rainure, de crête, d'encart ou de départ.

Nous avons étudié la propriété pour la décoration du texte et de la police, il est maintenant temps de passer à d'autres éléments. Dans ce didacticiel, nous verrons comment créer des cadres à l'aide de CSS... Cette propriété est utilisée assez souvent, elle devrait donc faire l'objet d'un peu plus d'attention.

Et donc, supposons qu'une bordure doive être faite autour d'un élément. Par exemple, créer un titre et faites un cadre autour.

Paramètres caractérisant le cadre : 1) Épaisseur du cadre, 2) Style du cadre et 3) Couleur du cadre. Et allons-y dans l'ordre :

• 1. Épaisseur du cadre : largeur de la bordure: 2px;
• 2. Style de cadre : style de bordure: solide;
• 3. Couleur du cadre : couleur de la bordure: # ff0000;

Quels sont les styles de cadres dans CSS? Vous trouverez ci-dessous tous les styles de bordure disponibles :

• pointé - C'est un cadre en pointillé.
• en pointillé - Ceci est un cadre en pointillé
• solide - C'est un cadre solide
• double - Il s'agit d'un double cadre
• rainure - Vue volumétrique
• crête - Vue volumétrique
• encart - Vue volumétrique
• début - Vue volumétrique

Nous avons maintenant tout pour créer une bordure autour du titre.

HTML

Crée une bordure autour du titre.

Et le style lui-même pour le cadre.

H2 (border-width : 2px ; border-style : solid ; border-color : # FF0000 ;)

En conséquence, une bordure rouge solide d'une épaisseur de 2px.

Le cadre est formé de quatre côtés : Supérieur, Droit, Inférieur et La gauche et, puisque nous avons spécifié la propriété frontière , le navigateur dessine par défaut les quatre côtés du cadre. Ainsi, si vous devez définir un cadre uniquement sur un côté, des préfixes sont utilisés pour indiquer le côté où créer le cadre.

• Haut - Sommet.
• droit - Droit
• bas - Bas
• la gauche - La gauche

Ainsi, si l'on veut faire un cadre uniquement en bas du paragraphe, c'est-à-dire le souligner, alors à chaque propriété frontière ajouter un préfixe bas ... Cela se traduira par la structure de code suivante.

H2 (border-bottom-width : 2px ; border-bottom-style : double ; border-bottom-color : # FF0000 ;)

L'utilisation de ces styles pour le navigateur signifierait que vous n'avez qu'à créer une bordure à partir du bas, c'est-à-dire souligner le titre. De la même manière, vous pouvez dupliquer ce code en plaçant le cadre de l'autre côté, par exemple celui du haut.

H2 (border-bottom-width : 2px ; border-bottom-style : double ; border-bottom-color : # FF0000 ; border-top-width : 2px ; border-top-style : double ; border-top-color : # FF0000 ;)

Le titre aura désormais une bordure rouge en haut et en bas. La même chose peut être faite pour les autres parties.

Comme vous l'avez probablement déjà remarqué, l'enregistrement s'est avéré assez volumineux. Il existe donc un type d'enregistrement abrégé, qui est souvent utilisé dans la pratique.

L'image ci-dessus montre la structure de la notation abrégée, où la propriété est indiquée frontière et comme valeurs, séparées par un espace, la largeur du cadre est indiquée - largeur de la bordure , le style de cadre est style de bordure et la couleur de la bordure - # ff0000 .

C'est-à-dire, lorsque le navigateur voit une telle notation abrégée frontière: 2px solide # ff0000; , créera également une bordure sur les quatre côtés du titre. Cette notation courte est équivalente à celle que nous avons utilisée ci-dessus (où trois propriétés ont été appliquées).

Si, en utilisant une notation courte, vous devez spécifier un cadre sur un seul côté, ajoutez un simpleton à la propriété indiquant le côté avec lequel créer un cadre.

H2 (bordure en haut : 2px solide # ff0000 ;)

Ainsi, à l'aide d'une courte note, un cadre est fabriqué à partir du haut, où l'épaisseur, le style et la couleur du cadre sont également indiqués.

Ainsi, en utilisant la propriété frontière un cadre est réalisé autour de n'importe quel élément. De plus, à l'aide du cadre, des liens de soulignement sont créés lorsqu'une couleur différente du soulignement est nécessaire. Eh bien, c'est tout avec les cadres, nous passons à la prochaine leçon importante, où nous considérerons