CSS à L'extérieur de la frontière
Je veux pouvoir dessiner une bordure en dehors de ma Div! Donc, si mon div est dit 20px par 20px, je veux une bordure 1px en dehors de cela (donc, en substance, je reçois un div 22x22px grand).
Je comprends que je peux juste faire la div 22x22 pour commencer, mais pour des raisons que j'ai, j'ai besoin de frontières sur l'extérieur.
CSS outline fonctionne, mais je ne veux que border-bottom ou border-top, donc quelque chose comme outline-bottom, qui ne fonctionne pas, est ce que je veux.
Est-il un moyen de faire cela?
Merci
6 réponses
Je pense que vous avez un peu compris les deux propriétés. Frontière affecte le bord extérieur de l'élément, faisant de l'élément de différentes taille. Outline ne changera pas la taille ou la position de l'élément (ne prend pas de place) et sort de la frontière. À partir de 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 pousse le div inférieur, mais le outline ne déplace pas la div supérieure et le contour chevauche la div inférieure.
, Vous pouvez en lire plus à ce sujet ici:
la Frontière
Contour
IsisCode vous donne une bonne solution. Un autre est de positionner border div à l'intérieur parent div. Cochez cet exemple http://jsfiddle.net/A2tu9/
UPD: Vous pouvez également utiliser un pseudo-élément :after (:before), dans ce cas, HTML ne sera pas pollué avec un balisage supplémentaire:
.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/
Essayez la propriété outline W3Schools-CSS Outline
Le contour n'interférera pas avec les largeurs et les longueurs des éléments/divs!
Veuillez cliquer sur le lien que j'ai fourni en bas pour voir les démos de travail des différentes façons dont vous pouvez créer des bordures, et des bordures internes/en ligne, même celles qui ne perturbent pas les dimensions de l'élément! Pas besoin d'ajouter des divs à chaque fois, comme mentionné dans une autre réponse!
Vous pouvez également combiner des bordures avec contours, et si vous le souhaitez, Box-shadows (également affiché 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:' met la bordure à l'extérieur de la largeur, de la mesure, en ajoutant aux dimensions hors-tout, sauf si vous utilisez la valeur 'encart':
div {border: inset solid 1px black};
Mais 'outline:' est une bordure supplémentaire en dehors de la bordure, et bien sûr ajoute toujours une largeur/longueur supplémentaire à l'élément.
J'espère que cela aide
PS: j'ai aussi été inspiré pour faire ce pour vous : l'Utilisation des bordures, des contours, et boîte-ombres
Pourquoi ne pas simplement utiliser background-clip?
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
See:
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
Très tard, mais je viens de rencontrer un problème similaire. Ma solution était des pseudo-éléments-Pas de balisage supplémentaire, et vous pouvez dessiner la bordure sans affecter la largeur. Positionnez le pseudo élément absolument (avec le principal positionné relativement) et whammo.
Voir ci-dessous, jsfiddle ici http://jsfiddle.net/mcx6m/
.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;
}
Mettez votre div dans un autre div, appliquez la bordure à la div externe avec N quantité de remplissage/marge oùn est l'espace que vous voulez entre eux.