Ist es möglich, irgendwie nur einen eingebauten Kastenschatten auf einer Seite eines Div zu haben? Beachten Sie, dass es sich hier um einen eingebauten Kastenschatten handelt, nicht um den normalen äußeren Kastenschatten.

In der folgenden JSFiddle sehen Sie beispielsweise, dass der eingefügte Schatten auf allen vier Seiten in unterschiedlichem Maße angezeigt wird.

Wie kann ich es NUR oben anzeigen lassen? Oder höchstens oben und unten?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Das ist was Sie suchen. Es enthält Beispiele für jede gewünschte Seite mit einem Schatten.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Weitere Beispiele finden Sie im Snippet:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Der Trick ist eine Sekunde im .box-innerInneren, die breiter als das Original ist .box, und die darauf box-shadowangewendet wird.

Fügen Sie dann mehr Polster hinzu .text, um die hinzugefügte Breite auszugleichen.

So sieht die Logik aus:

Und so geht's in CSS:

Verwenden Sie die maximale Breite, um .inner-boxnicht .boxbreiter zu werden und overflowum sicherzustellen, dass der Rest abgeschnitten wird:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110% sind breiter als das Elternteil, was im Kontext eines Kindes 100% ist (sollte dasselbe sein, wenn das Elternteil beispielsweise .boxeine feste Breite hat). Negative Ränder gleichen die Breite aus und bewirken, dass das Element zentriert wird (anstatt nur den rechten Teil auszublenden):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

Fügen Sie auf der X-Achse eine Polsterung hinzu, um die Breite auszugleichen .inner-box:

.text {
    padding: 20px 40px;
}

Hier ist eine funktionierende Geige.

Wenn Sie die Geige inspizieren, werden Sie sehen:

Ziemlich spät, aber eine doppelte Antwort, bei der das Auffüllen nicht geändert oder zusätzliche Divs hinzugefügt werden müssen, finden Sie hier: Es liegt nur ein Problem mit dem Box-Shadow-Inset-Boden vor . Es heißt: "Verwenden Sie einen negativen Wert für die vierte Länge, der die Ausbreitungsentfernung definiert. Dies wird oft übersehen, aber von allen gängigen Browsern unterstützt."

Aus der Geige des Antwortenden :

box-shadow: inset 0 -10px 10px -10px #000000;

Das kommt ein wenig näher.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

versuchen Sie es, vielleicht nützlich ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

oben, CSSweil Sie unten einen Kastenschatten haben.
Sie können mehr rot Hier

Dies könnte nicht die genaue Sache, die Sie suchen, aber Sie können mit einem sehr ähnlichen Effekt erzeugen rgbain Kombination mit linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Dies erzeugt einen linearen Farbverlauf von Schwarz mit 50% Deckkraft ( rgba(0,0,0,.5)) zu transparent ( rgba(0,0,0,0)), der 30% von oben kompetent transparent wird. Sie können mit diesen Werten spielen, um den gewünschten Effekt zu erzielen. Sie können es auf einer anderen Seite haben, indem Sie einen Grad-Wert ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) hinzufügen oder die Farben vertauschen. Wenn Sie wirklich komplexe Schatten wie verschiedene Winkel auf verschiedenen Seiten wünschen, können Sie sogar mit der Überlagerung beginnen linear-gradient.

Hier ist ein Ausschnitt, um es in Aktion zu sehen:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Inset Box Shadow nur auf der Oberseite?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }