it-swarm.com.de

CSS Inset Borders

Ich habe eine kurze Frage zu CSS-Rahmen.

Ich muss einen einfarbigen Rahmen erstellen. Dies ist die Art von CSS, die ich verwende:

border: 10px inset rgba(51,153,0,0.65);

Leider erzeugt dies einen 3D-Kantenrand (ignorieren Sie die Quadrate und das dunkle Beschreibungsfeld):

http://dl.dropbox.com/u/12147973/border-current.jpg

Das ist das Ziel:

http://dl.dropbox.com/u/12147973/border-boal.jpg

Irgendwelche Ideen?

58
JacobTheDev

Sie könnten box-shadow verwenden, möglicherweise:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>

Dies hat den Vorteil, dass das Hintergrundbild der div überlagert wird, es ist jedoch natürlich unscharf (wie Sie es von der box-shadow-Eigenschaft erwarten würden). Um die density des Schattens aufzubauen, können Sie natürlich weitere Schatten hinzufügen:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>


Edited, weil mir klar wurde, dass ich ein Idiot bin, und vergaß, die einfachste Lösung first anzubieten, die ein sonst leeres untergeordnetes Element verwendet, um die Ränder über den Hintergrund anzuwenden:

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
  <div></div>
</div>


Bearbeitete nach @ CoryDanielsons Kommentar, unten :

jsfiddle.net/dPcDu/2 Sie können einen 4th px-Parameter für den box-shadow hinzufügen, der die Verteilung übernimmt und seine Bilder leichter widerspiegelt.

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>

124
David Thomas

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

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).

11
podperson

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>
7
Vanessa King

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/

2
Adam Munns

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>

2
Chris S.

Du kannst das:

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

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.

0
Derrik de Moei

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>

0

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>
0
Jaha Ganiev

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>
0
Adam Grant