web-dev-qa-db-fra.com

Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter border-width à toute la largeur d'un élément?

Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter border-width à toute la largeur d'un élément?

Comme dans Photoshop, nous pouvons donner des traits - à l'intérieur, au centre et à l'extérieur

Je pense que les propriétés de bordure css par défaut sont centrées comme centre dans photoshop, ai-je raison?

Je veux donner une bordure à l'intérieur de la boîte, pas à l'extérieur. et ne veulent pas inclure la largeur de la bordure dans la largeur de la boîte.

csscss3
89
Jitendra Vyas
outline:1px solid white;

Cela n'ajoutera pas la largeur et la hauteur supplémentaires.

205
abenson

Découvrez les tailles de boîtes CSS ...

Cela peut être fait par la propriété CSS3, qui réduit la taille des boîtes. La valeur de border-box (par opposition à la valeur par défaut de content-box) attribue à la zone de rendu final la largeur déclarée, ainsi que toutes les bordures et marges de remplissage coupées à l'intérieur de la zone. Vous pouvez maintenant déclarer en toute sécurité que votre élément a une largeur de 100%, y compris un remplissage et une bordure à base de pixels, et que votre objectif sera atteint à la perfection.

  • -webkit-box-sizing: border-box;/* Safari/Chrome, autre WebKit * /
  • -moz-box-dimensionnement: border-box;/* Firefox, autre Gecko * /
  • taille de la boîte: boîte à bordure;/* Opera/IE 8+ * /

Je suggère de créer un mixin pour gérer cela pour vous. Vous trouverez plus d’informations sur le dimensionnement des boîtes sur le site W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

27
Chad

En fonction de la prise en charge de votre navigateur, vous pouvez utiliser le box-shadow propriété.

Vous pouvez définir la valeur de flou sur 0 et l’extension à l’épaisseur souhaitée. L’avantage de l’ombre de la boîte est que vous pouvez contrôler si elle est dessinée à l’extérieur (par défaut) ou à l’intérieur (à l’aide de la propriété inset).

Exemple:

box-shadow: 0 0 0 1px black; // Outside black border 1px

ou

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

L'un des grands avantages de l'utilisation de Box Shadow est que vous pouvez faire preuve de créativité en utilisant plusieurs cases Box Shadows:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

La seule chose que je ne peux pas dire, c'est quelle différence cela rendra le rendu des performances plus sage. Je suppose que cela pourrait devenir un problème si vous aviez des centaines d'éléments utilisant cette technique à la fois sur l'écran.

21
James Bryant

J'ai rencontré le même problème.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Cette réponse vous permet de spécifier un seul côté. Et fonctionnerait dans IE8 + - contrairement à l'utilisation de box-shadow.

Bien sûr, changez les propriétés de vos pseudo-éléments car vous devez sélectionner un côté spécifique.

* Nouveau et amélioré *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Cela permet d'utiliser la bordure et de toucher plusieurs côtés d'une boîte.

15
mikevoermans

Comme Abenson l'a dit, vous pouvez utiliser un contour mais un des pièges est que Opera pourrait dessiner une "forme non rectangulaire". Une autre option qui semble fonctionner est d'utiliser marges négatives, telles que ce css:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

Avec ce html:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Une autre option moins propre consiste à ajouter des balises supplémentaires au code HTML. Par exemple, vous définissez la largeur d'un élément externe et ajoutez la bordure à l'élément intérieur. Le CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

Et le html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>
6
ChrisD

Utilisation box-sizing: border-box afin de créer une bordure [~ # ~] à l'intérieur de [~ # ~] un div sans modifier la largeur du div.

Utilisez outline pour créer une bordure [~ # ~] en dehors de [~ # ~] d'un div sans modifier sa largeur.

Voici un exemple: https://jsfiddle.net/4000cae9/1/

Remarques: border-box actuellement, il n’est pas supporté par IE

Soutien:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
5
GibboK

Utilisez un rembourrage lorsqu'il n'y a pas de bordure. Enlevez le rembourrage quand il y a une bordure.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Essentiellement, il suffit de remplacer le remplissage 2px par des bordures 2px. La taille de la div reste la même.

3
Jake Wilson

Dans votre cas, pouvez-vous la modifier en soustrayant la moitié de la bordure du rembourrage? (-2,5 à partir du remplissage si votre bordure est 5px de large, vous ne pouvez pas avoir de remplissage négatif afin de réduire la largeur de la boîte). Vous pouvez ajouter 2,5 pixels supplémentaires à la marge pour conserver la même taille à la boîte.

Je n'aime vraiment pas cette suggestion, mais je ne pense pas qu'il existe un moyen de gérer cela proprement.

2
vfilby

Ainsi, vous essayez d'atteindre le même objectif que le très connu bug du modèle de la boîte IE ? Ce n'est pas possible. Ou vous souhaitez prendre en charge les clients avec IE sous Windows uniquement et choisissez un doctype qui force IE dans quirksmode .

1
BalusC

Une autre option, si votre couleur de fond est solide:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}
0
Jake Wilson

contour: 3px noir solide || bordure: noir 3px

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>
0
Matan Shushan