Czy w jakiś sposób można mieć wstawiony cień pola tylko po jednej stronie elementu div? Zwróć uwagę, że mówię tutaj o wstawionym cieniu pudełka, a nie zwykłym zewnętrznym cieniu pudełka.

Na przykład w poniższym JSFiddle zobaczysz, że wstawiony cień pojawia się ze wszystkich 4 stron w różnym stopniu.

Jak sprawić, by wyświetlał się TYLKO na górze? Lub co najwyżej TYLKO na górze i na dole?

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>

To jest to, czego szukasz. Zawiera przykłady dla każdej strony, którą chcesz z cieniem.

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

Zobacz fragment, aby zobaczyć więcej przykładów:

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>

Sztuczka polega na drugim .box-innerwnętrzu, które jest szersze niż oryginał .boxi box-shadowjest do tego stosowane.

Następnie dodano więcej wypełnienia, .textaby nadrobić dodatkową szerokość.

Oto jak wygląda logika:

A oto jak to się robi w CSS:

Użyj maksymalnej szerokości, .inner-boxaby nie spowodować .boxposzerzenia i overflowupewnić się, że pozostała część jest przycięta:

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

110% jest szersze niż rodzic, czyli 100% w kontekście dziecka (powinno być takie samo, gdy rodzic .boxma na przykład stałą szerokość). Marginesy ujemne uzupełniają szerokość i powodują wyśrodkowanie elementu (zamiast ukrywania tylko prawej części):

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

I dodaj trochę wypełnienia na osi X, aby nadrobić szersze .inner-box:

.text {
    padding: 20px 40px;
}

Oto działające Fiddle.

Jeśli zbadasz Skrzypce, zobaczysz:

Dość późno, ale zduplikowaną odpowiedź, która nie wymaga zmiany dopełnienia ani dodawania dodatkowych elementów div, można znaleźć tutaj: Problem z tylko dolną wstawką box-shadow . Mówi: „Użyj wartości ujemnej dla czwartej długości, która określa odległość rozprzestrzeniania. Jest to często pomijane, ale obsługiwane przez wszystkie główne przeglądarki”

Ze skrzypiec odpowiadającego :

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

To już trochę blisko.

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

spróbuj, może przydatne ...

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;  

powyżej, CSSponieważ na dole masz cień pudełka.
możesz czerwony więcej Tutaj

To może nie być dokładnie to, czego szukasz, ale możesz stworzyć bardzo podobny efekt, używając rgbaw połączeniu z linear-gradient:

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

Tworzy to liniowy gradient od czerni z 50% kryciem ( rgba(0,0,0,.5)) do przezroczystości ( rgba(0,0,0,0)), który zaczyna być kompetentnie przezroczysty 30% od góry. Możesz bawić się tymi wartościami, aby uzyskać pożądany efekt. Możesz mieć to po innej stronie, dodając wartość deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) lub zmieniając kolory. Jeśli chcesz naprawdę skomplikowanych cieni, takich jak różne kąty z różnych stron, możesz nawet zacząć nakładać warstwy linear-gradient.

Oto fragment, aby zobaczyć to w akcji:

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

Wstawiony cień skrzynki tylko na górnej stronie?

#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%;
        }