Ich versuche ein box-shadowauf allen vier Seiten anzuwenden . Ich konnte es nur auf 2 Seiten bekommen:
Wie wende ich Box-Shadow auf alle vier Seiten an?
Antworten:
Es liegt am x- und y-Versatz. Versuche dies:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
Bearbeiten (Jahr später ..): Die Antwort wurde browserübergreifender gestaltet, wie in den Kommentaren gefordert :)
Übrigens: Es gibt heutzutage viele CSS3-Generatoren. CSS3.ME , CSS3Maker , CSS3-Generator usw.
+1, weil Sie schneller die richtige Antwort erhalten haben, obwohl sie mit einem kleineren Radius und einem Spread-Wert besser aussieht.
—
dreißig Punkte
Vielen Dank. Ich habe mir deine erste Antwort angesehen und dachte, dass ich die Frage falsch verstanden habe :)
—
Damb
Sie sollten Ihre Antwort browserübergreifender gestalten.
—
Lucas
Ich bin mir nicht sicher warum, aber das funktioniert bei mir nicht. Ich bekomme keinen Boxschatten, wenn ich das benutze. Wenn ich die Antwort von @thirtydot verwende, funktioniert es. Sie müssen die Unschärfe und Ausbreitung haben, wenn die ersten beiden Werte 0 sind. Dies geschieht in Chrome.
—
Charles Williams
@thirtydot - Sie haben Recht, mit einem helleren Hintergrund können Sie es sehen. Aber wenn Ihr Hintergrund schwarz ist, können Sie ihn überhaupt nicht sehen. Ich sollte also nicht sagen, dass es nicht funktioniert. Aber es ist definitiv nicht sichtbar ohne die Ausbreitung, wenn Sie einen schwarzen Hintergrund haben, unabhängig von der Farbe des Kastenschattens. Selbst mit Rot scheint Ihr Rand leicht rot zu sein, aber es gibt keinen "sichtbaren" Kastenschatten. Wenn Sie also einen helleren Hintergrund haben, würde diese Lösung wahrscheinlich funktionieren. Für einen sehr dunklen Hintergrund ist diese Lösung nicht zuverlässig. jsfiddle.net/vkzd71rc vs jsfiddle.net/vkzd71rc/1
—
Charles Williams
Siehe: http://jsfiddle.net/thirtydot/cMNX2/8/
input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
Ich weiß, wofür jeder Wert im Kastenschatten mit 3 Wert + Farbe ist. Wofür steht dieser 4 Wert?
—
Libelle
Lesen Sie: developer.mozilla.org/En/CSS/Box-shadow - speziell ist es der "Ausbreitungsradius".
—
dreißig Punkte
Geigenschöpfer - MVP.
—
Terrance00
Das sieht cool aus.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Die einfachste und einfachste Lösung besteht darin, Schatten für alle vier Seiten hinzuzufügen. CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
Verstehen Sie die Box-Shadow-Syntax und schreiben Sie sie entsprechend
box-shadow: h-offset v-offset blur spread color;
h-Versatz: Horizontaler Versatz des Schattens. Ein positiver Wert platziert den Schatten auf der rechten Seite der Box, ein negativer Wert platziert den Schatten auf der linken Seite der Box - Erforderlich
v-Versatz: Vertikaler Versatz des Schattens. Ein positiver Wert setzt den Schatten unter die Box, ein negativer Wert setzt den Schatten über die Box - Erforderlich
Unschärfe: Unschärferadius (Je höher die Zahl, desto unschärfer wird der Schatten) - Optional
Farbe: Farbe des Schattens - Optional
Ausbreitung: Ausbreitungsradius. Ein positiver Wert erhöht die Größe des Schattens, ein negativer Wert verringert die Größe des Schattens - Optional
Einschub: Ändert den Schatten von einem äußeren Schatten in einen inneren Schatten - Optional
box-shadow: 0 0 10px #999;
Box-Shadow funktioniert besser mit Spread
box-shadow: 0 0 10px 8px #999;
Verwenden Sie 'Einschub', um Schatten innerhalb der Box anzuwenden
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
Verwenden Sie rgba (rot grün grün blau alpha), um den Schatten effizienter anzupassen
box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
Ich habe die Website http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ gefunden .
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
Es ist angemessen wie die anderen Antworten auf dieser Seite, aber während Sie sich bemühen, stimme ich über Ihre Antwort ab.
—
Blueray
CSS3 Box-Shadow: 4 Seiten Symmetrie
- jede Seite mit der gleichen Farbe
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}<div class="four-sides-with-same-color"></div>
- jede Seite mit einer anderen Farbe
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}<div class="four-sides-with-different-color"></div>Screenshots
refs
Verwenden Sie diesen CSS-Code für alle vier Seiten: Box-Shadow: 0px 1px 7px 0px rgb (106, 111, 109);
Sie können verschiedene Kombinationen unter dem folgenden Link.
https://www.cssmatic.com/box-shadow
Die Ergebnisse, die Sie benötigen, können mit dem folgenden CSS erzielt werden
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);