有沒有可能只在一個div的一邊有嵌入的方框陰影？請注意，我在這里談論的是一個嵌入框陰影，而不是正常的外部框陰影。

例如，在下面的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>

訣竅是一秒鐘。盒子-內側，寬度比原來的大。框，并對其應用框陰影。

然后，向。彌補增加寬度的文本。

邏輯是這樣的:

下面是在CSS中是如何做到的: 使用最大寬度。內盒不會導致。框變寬，溢出以確保剩余部分被剪裁:

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

110%比在子上下文中為100%的父更寬(當父。例如，框具有固定的寬度)。 負邊距彌補了寬度并使元素居中(而不是只隱藏右邊部分):

.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軸上添加一些填充以彌補更寬的。內盒:

.text {
    padding: 20px 40px;
}

這是一把能用的小提琴。 如果你檢查小提琴，你會看到:

有點晚了，但不需要改變填充或添加額外的div的重復答案可以在這里找到:有一個關于ly的框陰影插入底部的問題。它說，“使用負值的第四個長度定義傳播距離。這一點經常被忽視，但所有主流瀏覽器都支持它”

來自回答者的小提琴:

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

這可能不是你要找的東西，但是你可以通過結合使用rgba和線性漸變來創建一個非常相似的效果:

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%。您可以利用這些值來創造您想要的效果。您可以通過添加deg值(線性梯度(90deg，rgba(0，0，0.5)0%，rgba(0，0，0，0) 30%))或切換周圍的顏色，將它放在不同的一側。如果你想要非常復雜的陰影，比如不同側面的不同角度，你甚至可以開始線性漸變分層。

下面是它的一個片段:

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

因為你在底部有一個方框陰影。 你可以在這里多點紅色

用普通的盒子陰影一次設置四個很容易。使用負擴散很容易設置1，但是通過利用如下偽元素，可以很容易地設置兩個或三個邊(無需添加div ):

.box-example {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
}
.box-example::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2 {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
    margin-top: 8px;
}
.box-example2::before,
.box-example2::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2::after {
    box-shadow: inset -7px 0px 9px -7px rgb(0 0 0 / 40%);
}

<div class="box-example">I have a top and bottom</div>
<div class="box-example2">I have a top, bottom, and right</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%;
        }

從字面上看，你不能做這樣的事情，但你應該嘗試這個CSS技巧:

box-shadow: inset 0 3vw 6vw rgba(0,0,0,0.6), inset 0 -3vw 6vw rgba(0,0,0,0.6);

這似乎是最簡單的方法:

box-shadow: inset 0 calc(7px + 42px) 0 -42px black;

當然可以省略calc()部分，改為設置49px它只是為了清晰和/或干燥(例如，通過使用自定義變量)。

第三個[模糊]字段被設置為零以避免混淆；你可以隨意把任何值放在那里。