Come posso impostare un bordo all'interno del div

Question

Mi stavo chiedendo se c'è un modo per creare un div con il "bordo" all'interno del div. Quello che voglio dire è: ho un div di 200px per esempio e voglio che il bordo sia all'interno di quei 200 pixel, senza eccedere.

Ho bisogno di ottenere l'effetto di un div con un bordo non sul bordo della forma, ma 5px in più all'interno. Un'immagine può parlare più di centinaia di parole

voglio che questo:

Ecco il mio codice:

http://jsfiddle.net/hpLYD/1/

Il CSS:

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    background: red; 
    border: 3px solid blue; 
} 

Imbottitura la proprietà sta espandendo il div intero compreso il confine.

Come posso ottenere quell'effetto utilizzando solo css? È possibile?

Answer 1

È possibile farlo utilizzando la proprietà CSS3 box-shadow. Aggiungere la seguente al CSS:

box-shadow: 0px 0px 0px 5px #f00; 

jsFiddle example

Answer 2

Non è possibile inserire un bordo all'interno di un elemento, tuttavia è possibile utilizzare box-shadow per dare in tal senso:

.circle { 
    border-radius: 50%; 
    width: 190px; 
    height: 190px; 
    background: red; 
    border: 3px solid blue; 
    box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */ 
} 

JSFiddle example .

Si noti che questa è una proprietà in stile CSS3 e non è supportata su tutti i browser. Potrebbe inoltre essere necessario utilizzare i prefissi dei fornitori su alcuni browser (-webkit, -moz, ecc.). Controlla http://caniuse.com/#search=box-shadow per supporto.

Answer 3

Suppongo che potresti aggiungere un'altra classe al cerchio.

Ho fatto questo per voi.

Non penso che si possa aggiungere un padding a un bordo arrotondato (non citatemi sopra), ma ho fatto il violino in circa 30 secondi.

.scirle {see fiddle} 

http://jsfiddle.net/hpLYD/7/embedded/result/

Answer 4

Mentre box-shadow è probabilmente il modo migliore per andare, le persone sembrano dimenticare che la questione richiede che il confine non ha superato 200px. Per ottenere questo risultato è possibile utilizzare il parametro inset sull'attributo box-shadow (che creerà un'ombra interna).

Sarà inoltre necessario modificare box-sizing in border-box in modo che la dimensione sia proporzionale al bordo e non al contenuto.

Here's an JSFiddle with the result

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    background: red; 
    border: 3px solid red; 
    box-shadow: 0px 0px 0px 5px blue inset; 
    box-sizing: border-box; 
} 

Answer 5

Il problema è un confine prende bene immobile dello schermo che ci piaccia o no.

Se un bordo di 1 pixel si trova sull'elemento 100px, anche se potessimo farlo apparire all'interno, quell'elemento ora sarebbe solo 98px all'interno. Ma ciò in cui siamo bloccati in realtà è un elemento 100px che in realtà è 102 px causato dai bordi all'esterno. Border-box non sembra fare nulla ai bordi nell'ultima versione di Chrome - appaiono sempre all'esterno.

Un modo semplice per risolvere questo problema è l'utilizzo di un elemento CSS :after o :before, che in pratica significa che nessuno spazio sullo schermo viene perso dal bordo. Vedere esempio:

.border{ position: relative; } 
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); } 

Answer 6

<div class="mydiv"></div> 

.mydiv{ 
    position:relative; 
    height:150px; 
    width:200px; 
    background:#f00; 
} 
.mydiv:before{ 
    position:absolute; 
    content:''; 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left:10px; 
    right: 10px; 
    border:1px solid #daa521; 
} 

Here's an JSFiddle with the result