Wie wende ich Box-Shadow auf alle vier Seiten an?

84

Ich versuche ein box-shadowauf allen vier Seiten anzuwenden . Ich konnte es nur auf 2 Seiten bekommen:

css box-shadow Libelle
quelle
2
CSS3please.com ist immer hilfreich für diese Art von Sachen ...
sscirrus

Antworten:

143

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.

Damb
quelle
1
+1, weil Sie schneller die richtige Antwort erhalten haben, obwohl sie mit einem kleineren Radius und einem Spread-Wert besser aussieht.
dreißig Punkte
1
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
1
@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
34

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;
}
dreißig Punkte
quelle
Ich weiß, wofür jeder Wert im Kastenschatten mit 3 Wert + Farbe ist. Wofür steht dieser 4 Wert?
Libelle
1
Lesen Sie: developer.mozilla.org/En/CSS/Box-shadow - speziell ist es der "Ausbreitungsradius".
dreißig Punkte
Geigenschöpfer - MVP.
Terrance00
10

Das sieht cool aus.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Nalan Madheswaran
quelle
10

Einfach so wie dieser Code:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
Pankskie
quelle
5

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*/
Huzaif Sayyed
quelle
5

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);
Seshu Vuggina
quelle
2

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);
}
user3619130
quelle
1
Es ist angemessen wie die anderen Antworten auf dieser Seite, aber während Sie sich bemühen, stimme ich über Ihre Antwort ab.
Blueray
1

CSS3 Box-Shadow: 4 Seiten Symmetrie

  1. 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>
Erweitern Sie das Snippet

  1. 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>
Erweitern Sie das Snippet

Screenshots

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

xgqfrms
quelle
0

Verwenden Sie diesen CSS-Code für alle vier Seiten: Box-Shadow: 0px 1px 7px 0px rgb (106, 111, 109);

Bal Mukund Kumar
quelle
0

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);
Ans
quelle