どういうわけか、divの片側にインセットボックスシャドウのみを設定することは可能ですか？差し込みについて話していることに注意してくださいここでは、通常の外側のボックスシャドウではなく、ボックスシャドウ。

たとえば、次のJSFiddleでは、インセットシャドウが4辺すべてにさまざまな程度で表示されています。

上部のみに表示するにはどうすればよいですか？または、最大で上下のみですか？

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>

これはあなたが探しているものです。影を付けたい各辺の例があります。

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

その他の例については、スニペットを参照してください。

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>

トリックは、第二のある.box-innerオリジナルよりも幅が大きくなっている内部、.boxおよびbox-shadowそれに適用されます。

次に、追加さ.textれた幅を補うために、にパディングを追加しました。

ロジックは次のようになります。

そして、CSSでこれを行う方法を次に示します。

最大幅を使用して、幅が広く.inner-boxならないようにし、残りが切り取られるようにします。.boxoverflow

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

110％は親よりも広く、子のコンテキストでは100％です（.boxたとえば、親の幅が固定されている場合も同じです）。負のマージンは幅を補い、要素を中央に配置します（右側の部分だけを非表示にするのではなく）：

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

そして、X軸にパディングを追加して、より広いものを補い.inner-boxます：

.text {
    padding: 20px 40px;
}

これが動作するフィドルです。

フィドルを調べると、次のように表示されます。

かなり遅いですが、パディングを変更したり、余分なdivを追加したりする必要のない重複した回答がここにあります。「拡散距離を定義する4番目の長さに負の値を使用します。これは見過ごされがちですが、すべての主要なブラウザーでサポートされています」

回答者のフィドルから：

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

これは少し近づきます。

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

試してみてください、多分便利です...

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;  

上記のCSS場合、下部にボックスシャドウがあります。
あなたはより赤くすることができますここで

これはあなたが探しているものとは正確ではないかもしれませんが、rgbaと組み合わせて使用することで非常に類似した効果を作成できますlinear-gradient。

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

これにより、50％の不透明度（rgba(0,0,0,.5)）の黒から透明（rgba(0,0,0,0)）までの線形グラデーションが作成され、上から30％まで透明になります。これらの値を操作して、目的の効果を作成できます。度の値（linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)）を追加するか、色を切り替えて、別の面に配置できます。さまざまな側面のさまざまな角度など、本当に複雑なシャドウが必要な場合は、レイヤー化を開始することもできますlinear-gradient。

動作を確認するためのスニペットを次に示します。

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

インセットボックスシャドウは上面のみですか？

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