仅在一侧插入阴影盒？

Question

是否有可能以某种方式只在div的一侧插入盒子阴影？请注意，我在这里谈的是插入框阴影，而不是正常的外框阴影。

例如，在下面的JSFiddle中，您将看到插入阴影在所有4个边上都出现不同程度。

如何才能将它显示在顶部？或者最多只在顶部和底部？

JSFiddle： http://jsfiddle.net/ahmadka/KFrun/

HTML：

<div class="myDiv">
    <div class="text">
        Lorem ipsum ....
    </div>
</div>

CSS：

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

.text
{
    padding:20px;   
}

Answer 1

这就是你要找的东西。它有你想要的每一面的阴影示例。

有关更多示例，请参阅js小提琴： http://jsfiddle.net/KFrun/171/

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

Answer 2

诀窍是内部第二个.box-inner，其宽度大于原始.box，box-shadow适用于此。

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

这就是逻辑的样子：

以下是CSS中的完成方式：

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

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

Here's a working Fiddle.

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

Answer 3

这有点接近。

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

Answer 4

相当晚一些，但可以在此处找到不需要更改填充或添加额外div的重复答案：Have an issue with box-shadow Inset bottom only。它说，“使用第四个长度的负值来定义传播距离。这经常被忽视，但是所有主流浏览器都支持”

来自回答者的fiddle：

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

Answer 5

尝试一下，也许有用......

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因为你底部有一个盒子阴影 你可以更多地红色Here

Answer 6

仅在顶部插入框阴影吗？

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

Answer 7

这可能并不是您要查找的确切内容，但是可以结合使用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>

Answer 8

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

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