CSS Inset Borders

Ich würde box-sizing empfehlen.

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }

Die einzige Lösung, die ich gefunden habe (und ich habe alle Vorschläge in diesem Thread ohne Erfolg ausprobiert), ist die Verwendung eines Pseudoelements wie: before

Z.B.

.has-inset-border:before {
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  width: 10px;
  border: 4px dashed red;
}

Die Box-Size-Eigenschaft funktioniert nicht, da die Grenze immer außerhalb von allem endet.

Die Box-Shadow-Optionen haben den doppelten Nachteil, dass sie nicht wirklich funktionieren und nicht so umfassend unterstützt werden (und mehr CPU-Zyklen für das Rendern kosten, wenn Sie sich dafür interessieren).

Es ist ein alter Trick, aber der einfachste Weg, dies zu tun, ist der Umriss-Offset mit einem negativen Wert (Beispiel unten verwendet -6px). Hier ist eine Geige davon - ich habe die äußere Umrandung rot und die Kontur weiß gemacht, um die beiden zu unterscheiden:

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>

Ich weiß nicht, mit was du vergleichst.

Eine sehr einfache Möglichkeit, die Einfügung eines Rahmens im Vergleich zu anderen nicht umrandeten Elementen zu erzielen, ist das Hinzufügen eines border: ?px solid transparent; zu den Elementen, bei denen nicht einen Rahmen haben. 

Dadurch wird das umrandete Element eingeblendet.

http://jsfiddle.net/cmunns/cgrtd/

Wenn Sie sicherstellen möchten, dass sich der Rahmen innerhalb Ihres Elements befindet, können Sie verwenden

box-sizing:border-box;

dadurch wird der folgende Rand im Inneren des Elements platziert:

border: 10px solid black;

(Ein ähnliches Ergebnis erhalten Sie, wenn Sie den Zusatzparameter inset für Box-Shadow verwenden. Stattdessen ist dieser Parameter für den realen Rahmen gedacht und Sie können Ihren Schatten trotzdem für etwas anderes verwenden.)

Anmerkung zu einer anderen Antwort oben: Sobald Sie eine inset für box-shadow eines bestimmten Elements verwenden, sind Sie auf maximal 2 Box-Shadows für dieses Element beschränkt und benötigen für das weitere Shadowing ein Wrapper-Div.

Beide Lösungen sollten Sie auch von den unerwünschten 3D-Effekten befreien. Beachten Sie auch, dass beide Lösungen stapelbar sind (siehe das Beispiel, das ich 2018 hinzugefügt habe).

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}

<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>

Du kannst das:

.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}

Ich habe also versucht, eine Umrandung im Schwebeflug erscheinen zu lassen, aber die gesamte untere Leiste des Hauptmenüs wurde verschoben.

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

Ich hoffe, das hilft jemandem da draußen.

Einfache SCSS-Lösung mit Pseudoelementen

Live-Demo: https://codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
	display: flex;
	height: 100px;
	width: 100%;
	position: relative;
	background-color: #f2f2f2;
	box-sizing: border-box;
	
	// Use pseudo-element to create inset border
	&:before {
		position: absolute;
		content: ' ';
		display: flex;
		border: $border-width solid black;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: $border-width solid black;
		// Important: We must deduct border size from width and height
		width: calc(100% - $border-width); 
		height: calc(100% - $border-width);
	}
}

<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>

Sie können einen Hintergrund-Clip verwenden: border-box;

Beispiel:

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>

Wenn box-sizing keine Option ist, können Sie dies auch einfach als untergeordnetes Element der Größe festlegen.

Demo

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }

HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>