127

どういうわけか 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>

4

9 に答える 9

280

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

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

于 2014-02-20T08:52:35.740 に答える
9

これは少し近づきます。

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}
于 2013-07-10T14:12:44.627 に答える
1

試してみてください、多分役に立つ...

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原因は、下にボックスの影があることです。ここで
もっと赤くすることができます

于 2013-09-27T09:49:27.033 に答える
1

これはまさにあなたが探しているものではないかもしれませんが、rgbaと組み合わせて使用​​することで、非常によく似た効果を生み出すことができますlinear-gradient:

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

rgba(0,0,0,.5)これにより、不透明度 50% の黒 ( ) から透明 ( ) への線形グラデーションが作成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>

于 2019-12-20T16:16:21.387 に答える