Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter de largeur de bordure à toute la largeur de l'élément?

Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter de largeur de bordure à toute la largeur de l'élément?

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

Je pense que les propriétés de bordure CSS par défaut sont au centre comme au centre dans Photoshop, ai-je raison?

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

outline:1px solid white;

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

Découvrez le dimensionnement des boîtes CSS ...

La propriété CSS3 box-sizing peut le faire. La valeur de la zone de bordure (par opposition à la valeur par défaut de la zone de contenu) fait de la zone de rendu finale la largeur déclarée, et toute bordure et remplissage coupés à l'intérieur de la zone. Vous pouvez maintenant déclarer en toute sécurité votre élément comme ayant une largeur de 100%, y compris le remplissage et la bordure basés sur les pixels, et atteindre parfaitement votre objectif.

• -webkit-box-sizing: border-box; / * Safari / Chrome, autre WebKit * /
• -moz-box-sizing: border-box; / * Firefox, autre Gecko * /
• box-dimensionnement: border-box; / * Opera / IE 8+ * /

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

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

Vous pouvez définir la valeur de flou sur 0 et l'étalement sur quelle que soit l'épaisseur que vous recherchez. L'avantage de Box Shadow est que vous pouvez contrôler si elle est dessinée à l'extérieur (par défaut) ou à l'intérieur (en utilisant la insetpropriété).

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 l'ombre de boîte est que vous pouvez faire preuve de créativité en utilisant plusieurs ombres de boîte:

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 fera en termes de performances de rendu. Je suppose que cela pourrait devenir un problème si vous aviez des centaines d'éléments utilisant cette technique à la fois à l'écran.

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, modifiez les propriétés de vos pseudo éléments car vous devez distinguer 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.

À utiliser box-sizing: border-boxpour créer une bordure À L'INTÉRIEUR d' un div sans modifier la largeur de div.

Permet outlinede créer une bordure À L'EXTÉRIEUR d' un div sans modifier la largeur de div.

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

Remarques: border-boxactuellement, il n'est pas pris en charge 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>

Comme l'a dit Abenson, vous pouvez utiliser un contour, mais un inconvénient est qu'Opera pourrait dessiner une "forme non rectangulaire". Une autre option qui semble fonctionner consiste à utiliser des marges négatives, comme 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 un balisage supplémentaire au html. Par exemple, vous définissez la largeur d'un élément extérieur et ajoutez la bordure à l'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>

Utilisez un remplissage lorsqu'il n'y a pas de bordure. Supprimez le rembourrage lorsqu'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, remplacez simplement le remplissage 2px par des bordures 2px. La taille de div reste la même.

Dans votre cas, pouvez-vous le fudger en soustrayant la moitié de la bordure du rembourrage? (-2,5 à partir du remplissage si votre bordure mesure 5px de large, vous ne pouvez pas avoir de remplissage négatif, donc pour aller plus petit, réduisez la largeur totale de la boîte). Vous pouvez ajouter 2,5 pixels supplémentaires à la marge pour conserver la même taille de la boîte globale.

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

Ainsi, vous essayez d'obtenir la même chose que le bogue du modèle de boîte IE bien connu ? Ce n'est pas possible. Ou vous voulez prendre en charge les clients avec IE sous Windows uniquement et choisir un doctype qui force IE en mode quirksmode .

Une autre option, si votre couleur d'arrière-plan est unie:

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
}

contour: 3px noir uni || bordure: 3px noir uni

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

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>