Come dare un bordo a qualsiasi elemento usando CSS senza aggiungere la larghezza del bordo all'intera larghezza dell'elemento?

Come dare un bordo a qualsiasi elemento usando CSS senza aggiungere la larghezza del bordo all'intera larghezza dell'elemento?

Come in Photoshop, possiamo dare un tratto: dentro, centro e fuori

Penso che le proprietà del bordo CSS predefinite siano al centro come il centro in Photoshop, giusto?

Voglio dare un bordo all'interno della scatola non all'esterno. e non si desidera includere la larghezza del bordo nella larghezza del riquadro.

outline:1px solid white;

Questo non aggiungerà la larghezza e l'altezza extra.

Controlla il dimensionamento della scatola CSS ...

La proprietà CSS3 box-sizing può farlo. Il valore della casella del bordo (in contrasto con l'impostazione predefinita della casella del contenuto) rende la casella renderizzata finale della larghezza dichiarata e qualsiasi bordo e riempimento tagliati all'interno della casella. Ora puoi dichiarare in modo sicuro che il tuo elemento ha una larghezza del 100%, inclusi il riempimento e il bordo basati sui pixel, e raggiungere perfettamente il tuo obiettivo.

• -webkit-box-dimensionamento: border-box; / * Safari / Chrome, altri WebKit * /
• -moz-box-dimensionamento: border-box; / * Firefox, altro Gecko * /
• dimensionamento scatola: border-box; / * Opera / IE 8+ * /

Suggerirei di creare un mixin per gestire questo per te. Puoi trovare ulteriori informazioni sul dimensionamento delle scatole su W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

A seconda del supporto del browser previsto è possibile utilizzare la box-shadowproprietà.

Puoi impostare il valore di sfocatura su 0 e la diffusione su quale spessore stai cercando. La cosa grandiosa dell'ombra del riquadro è che puoi controllare se è disegnata all'esterno (per impostazione predefinita) o all'interno (usando la insetproprietà).

Esempio:

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

o

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

Un grande vantaggio dell'utilizzo dell'ombra del riquadro è che puoi essere creativo utilizzando più ombre del riquadro:

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

L'unica cosa che non posso dire è quale differenza renderà le prestazioni di rendering saggia. Presumo che potrebbe diventare un problema se avessi centinaia di elementi che utilizzano questa tecnica contemporaneamente sullo schermo.

Mi sono imbattuto nello stesso problema.

.right-border {
    position: relative;
}

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

Questa risposta ti consente di specificare un solo lato. E funzionerebbe in IE8 +, a differenza dell'uso di box-shadow.

Ovviamente cambia le proprietà degli pseudo elementi quando hai bisogno di individuare un lato specifico.

* Nuovo e migliorato *

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

Ciò consente la capacità di utilizzare il bordo e colpire più lati di una scatola.

Utilizzare box-sizing: border-boxper creare un bordo ALL'INTERNO di un div senza modificare la larghezza del div.

Utilizzare outlineper creare un bordo ESTERNO a un div senza modificare la larghezza del div.

Ecco un esempio: https://jsfiddle.net/4000cae9/1/

Note: border-boxattualmente non è supportato da IE

Supporto:

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>

Come ha detto abenson, puoi usare un contorno ma un trucco è che Opera potrebbe disegnare una "forma non rettangolare". Un'altra opzione che sembra funzionare è usare i margini negativi, come questo CSS:

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

}

Con questo html:

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

Un'altra opzione meno pulita consiste nell'aggiungere markup extra all'html. Ad esempio, si imposta la larghezza di un elemento esterno e si aggiunge il bordo a quello interno. Il CSS:

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

E l'html:

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

Usa il riempimento quando non ci sono bordi. Rimuovi il riempimento quando c'è un bordo.

.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;
}

In sostanza, basta sostituire il riempimento di 2px con bordi di 2px. La dimensione del div rimane la stessa.

Nel tuo caso puoi falsificarlo sottraendo metà del bordo dall'imbottitura? (-2,5 dal padding se il tuo bordo è largo 5px, non puoi avere un padding negativo, quindi per rimpicciolire riduci la larghezza complessiva della scatola). Puoi aggiungere 2,5 px extra al margine per mantenere la scatola complessiva della stessa dimensione.

Non mi piace davvero questo suggerimento, ma non credo che ci sia un modo per gestirlo in modo pulito.

Quindi, stai cercando di ottenere lo stesso del noto bug del modello di scatola di IE ? Non e possibile. Oppure vuoi supportare i client con IE solo su Windows e scegliere un doctype che forza IE in modalità bizzarra .

Un'altra opzione, se il colore di sfondo è solido:

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
}

contorno: 3px nero pieno || bordo: 3px nero pieno

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

}

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

<div>
hello world
</div>