web-dev-qa-db-fra.com

CSS hors des frontières

Je veux être capable de tracer une frontière à l'extérieur de ma div! Donc, si mon div est dit 20px par 20px, je veux une bordure de 1px en dehors de cela (donc essentiellement, je reçois un div de 22x22px de grande taille).

Je comprends que je peux commencer par la division 22x22, mais pour des raisons qui me tiennent à cœur, j’ai besoin que les frontières soient à l’extérieur.

Les contours CSS fonctionnent, mais je ne veux que les objets border-bottom ou border-top, alors quelque chose comme contour-bottom, qui ne fonctionne pas, est ce que je veux.

Y a-t-il un moyen de faire cela?

Merci

cssborder
49
user1083320

Je pense que vous comprenez un peu les deux propriétés. La bordure affecte le bord extérieur de l'élément, ce qui le différencie par sa taille. Contour ne changera pas la taille ou la position de l'élément (ne prend pas de place) et sort de la bordure. Dans votre description, vous souhaitez utiliser la propriété border.

Regardez l'exemple simple ci-dessous dans votre navigateur:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Remarquez comment la bordure déplace le div du bas, mais le contour ne déplace pas le div du haut et le contour chevauche le div du bas.

Vous pouvez en lire plus à ce sujet ici:
Border
Outline

56
Bear In Hat

Essayez la propriété de contour W3Schools - CSS Outline

Les contours n'interféreront pas avec les largeurs et les longueurs des éléments/divs!

Veuillez cliquer sur le lien que j'ai fourni au bas de voir les démos de travail des différentes façons de créer des bordures et des bordures intérieures/en ligne, même celles qui ne perturbent pas les dimensions de l'élément! Pas besoin d'ajouter des divs supplémentaires à chaque fois, comme mentionné dans une autre réponse!

Vous pouvez également combiner des bordures avec des contours et, si vous le souhaitez, des ombres de boîte (également affichées via un lien)

<head>
   <style type="text/css" ref="stylesheet">
      div {
        width:22px;
        height:22px;
        outline:1px solid black;
      }
   </style>
</head>
<div>
    outlined
</div>

Habituellement, par défaut, "border:" place la bordure à l'extérieur de la largeur, mesure, ajoutant des dimensions globales, à moins que vous n'utilisiez la valeur "inset":

div {border: inset solid 1px black};

Mais "contour:" est une bordure supplémentaire en dehors de la frontière, et bien sûr, ajoute encore une largeur/longueur supplémentaire à l'élément.

J'espère que cela t'aides

PS: J'ai aussi été inspiré pour faire ceci pour vous : tilisation des bordures, des contours et des ombres de la boîte

12
Benjaroo

IsisCode vous donne une bonne solution. Une autre consiste à positionner border div inside parent div. Vérifiez cet exemple http://jsfiddle.net/A2tu9/

UPD: Vous pouvez également utiliser le pseudo élément :after (:before), dans ce cas, le code HTML ne sera pas pollué par des balises supplémentaires:

.my-div {
    position: relative;
    padding: 4px;
    ...
}
.my-div:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 1px #888 solid;
}

Démo: http://jsfiddle.net/A2tu9/191/

11
dfsq

Pourquoi ne pas simplement utiliser background-clip?

-webkit-background-clip: padding;
   -moz-background-clip: padding;
        background-clip: padding-box;

Voir:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip

8
K-Gun

Bien tard, mais je viens de rencontrer un problème similaire.
Ma solution était des pseudo-éléments - pas de balisage supplémentaire, et vous obtenez de tracer la bordure sans affecter la largeur.
Positionnez le pseudo-élément absolument (avec le principal positionné relativement) et whammo.

Voir ci-dessous, JSFiddle ici .

.hello {
    position: relative;
    /* Styling not important */
    background: black;
    color: white;
    padding: 20px;
    width: 200px;
    height: 200px;
}

.hello::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
    z-index: -1;
}
6
chrisdhanaraj

Placez votre div dans un autre div, appliquez la bordure à la div externe avec n montant de remplissage/marge où n est l'espace que vous souhaitez entre eux.

4
IsisCode