CSS double bordure avec bordure extérieure plus épaisse que la bordure intérieure

dans mon travail actuel, je dois produire une double bordure sur un conteneur. Le bord-style: double; réaliser ceci, cependant mon client veut que le bord extérieur soit plus épais et le bord intérieur soit de l'épaisseur normale.

autre que la création de 2 divs, 1 imbriqué à l'intérieur d'un autre avec la div externe ayant une plus grande épaisseur, ou à travers l'utilisation d'images de bordure y a-t-il un moyen que je puisse le faire avec CSS avec juste 1 div? spécifiant le style de bordure: double; et encore être en mesure de faire le bordure plus épaisse.

25
demandé sur learnjourney 2010-11-15 06:28:13
la source

4 ответов

les contours sont inclus dans la spécification CSS3 et permettent d'appliquer une bordure et un contour à un seul élément.

la propriété outline est identique à la commande border. La propriété offset supplémentaire permet cependant de déplacer la bordure plus loin à l'intérieur ou à l'extérieur de l'élément.

j'ai utilisé les contours pour donner aux bordures 2 couleurs différentes, changer le code pour donner à vos bordures 2 tailles différentes.

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}
51
répondu bnabilos 2013-12-23 11:44:22
la source

Non, il n'est pas possible. La largeur de bordure CSS spécifie l'épaisseur totale de la bordure, quel que soit le style de bordure. Je ne vois pas de meilleur moyen que de l'emballer dans une autre DIV.

Edit: Vous avez pu le pirater en utilisant outline, mais il y a un subtile différence entre outline et border.

border: double 4px black;
outline: solid 3px black;

(cela produira une "frontière" interne de 1px et une "frontière" externe de 4px, si vous pouvez l'appeler ainsi)

7
répondu casablanca 2010-11-15 06:30:43
la source

ou vous pouvez utiliser une image de frontière avec ce nouveau truc de fantaisie dans CSS3, bien qu'il ne serait pas pris en charge dans la plupart des navigateurs actuellement utilisés.

0
répondu Niet the Dark Absol 2010-11-15 06:31:32
la source

vous pouvez aussi utiliser le pseudo-élément :avant comme ceci:

https://stackoverflow.com/a/11179169/1468708

de Sorte que vous pouvez avoir une double frontière avec l'épaisseur différente juste au fond, par exemple.

0
répondu Max Girkens 2017-05-23 15:02:36
la source

Autres questions sur