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 回答
14

诀窍是第二个.box-inner内部，它的宽度比原来的大.box，并且box-shadow应用于那个。

然后，添加更多的填充来.text弥补增加的宽度。

这就是逻辑的样子：

盒逻辑

下面是它在 CSS 中的实现方式：

使用最大宽度.inner-box不会导致.box变宽，并overflow确保剩余部分被剪裁：

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

.box110% 比在子上下文中为 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 轴上添加一些填充以弥补更宽.inner-box：

.text {
    padding: 20px 40px;
}

这是一个工作小提琴。

如果你检查小提琴，你会看到：

。盒子 .box-inner 。文本

于 2013-07-10T14:06:15.717 回答
12

有点晚了，但可以在此处找到不需要更改填充或添加额外 div 的重复答案：仅对 box-shadow Inset bottom 有问题。它说，“对定义传播距离的第四个长度使用负值。这经常被忽略，但所有主要浏览器都支持”

从回答者的小提琴：

box-shadow: inset 0 -10px 10px -10px #000000;
于 2014-06-24T15:47:41.680 回答
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

使用普通的 box-shadow 一次设置所有四个很容易。使用负散布设置 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>

于 2021-09-03T16:08:32.523 回答
1

这可能不是您正在寻找的确切内容，但您可以通过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%。您可以使用这些值来创建您想要的效果。您可以通过添加 deg 值 ( 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 回答
0

从字面上看，你不能做这样的事情，但你应该试试这个 CSS 技巧：

box-shadow: inset 0 3vw 6vw rgba(0,0,0,0.6), inset 0 -3vw 6vw rgba(0,0,0,0.6);
于 2021-02-15T14:03:24.910 回答
0

仅在顶部的插入框阴影？

#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%;
        }
于 2019-08-28T13:53:27.503 回答