Platzierung des Rahmens innerhalb des div und nicht an dessen Rand

Question

Ich habe eine <div> Element, und ich möchte es mit einem Rahmen versehen. Ich weiß, dass ich schreiben kann style="border: 1px solid black" , aber dies fügt 2px auf jeder Seite des div, das ist nicht das, was ich will.

Ich würde lieber haben diese Grenze -1px von der Kante des div sein. Das div selbst ist 100px x 100px, und wenn ich eine Grenze hinzufügen, dann habe ich einige Mathematik zu tun, um die Grenze erscheinen zu lassen.

Gibt es eine Möglichkeit, dass ich die Grenze erscheinen, und sicherzustellen, dass das Feld noch 100px (einschließlich der Grenze) sein wird?

Answer 1

Satz box-sizing Eigenschaft zu border-box :

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

Es funktioniert bei IE8 und höher .

Answer 2

Sie können auch box-shadow wie folgt verwenden:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Beispiel hier: http://jsfiddle.net/nVyXS/ (zum Anzeigen des Rahmens mit der Maus darüberfahren)

Dies funktioniert nur in modernen Browsern. Zum Beispiel: Keine Unterstützung für IE 8. Siehe caniuse.com (Box-Shadow-Funktion) für weitere Informationen.

Answer 3

Wahrscheinlich ist es eine verspätete Antwort, aber ich möchte meine Erkenntnisse mit Ihnen teilen. Ich habe 2 neue Ansätze für dieses Problem gefunden, die ich hier in den Antworten nicht gefunden habe:

Innere Grenze durch box-shadow css-Eigenschaft

Ja, box-shadow wird verwendet, um den Elementen einen Rahmenschatten hinzuzufügen. Aber Sie können angeben inset Schatten, das würde eher wie ein innerer Rand als ein Schatten aussehen. Sie müssen nur den horizontalen und vertikalen Schatten auf 0px und die " spread " Eigenschaft des box-shadow auf die Breite des gewünschten Rahmens. Also für die "innere" Grenze von 10px würden Sie das folgende schreiben:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

Hier ist jsFiddle Beispiel, das den Unterschied verdeutlicht zwischen box-shadow Rand und "normaler" Rand. Auf diese Weise Ihre Grenze und die Box Breite sind von insgesamt 100px einschließlich der Grenze.

Mehr über box-shadow: aquí

Umrandung durch die css-Eigenschaft outline

Hier ist ein anderer Ansatz, aber in diesem Fall würde der Rand außerhalb des Kastens liegen. Hier ist ein Beispiel . Wie aus dem Beispiel hervorgeht, können Sie css verwenden outline Eigenschaft, um den Rahmen festzulegen, der die Breite und Höhe des Elements nicht beeinflusst. Auf diese Weise wird die Breite des Rahmens nicht zur Breite eines Elements hinzugefügt.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Mehr über den Umriss: aquí

Answer 4

Yahoo! Das ist wirklich möglich. Ich habe es gefunden.

Für die untere Umrandung:

div {box-shadow: 0px -3px 0px red inset; }

Für Top Border:

div {box-shadow: 0px 3px 0px red inset; }

Answer 5

Sie können die Eigenschaften outline y outline-offset mit einem negativen Wert anstelle einer regulären border , funktioniert für mich:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>