仅在一侧插入阴影盒？

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

这是一个工作小提琴.

如果你检查小提琴,你会看到:

Answer 3

有点晚了,但是可以在这里找到一个不需要改变填充或添加额外div的重复答案:只有盒子阴影插入底部有问题.它说,"使用第四个长度的负值来定义传播距离.这经常被忽视,但是所有主流浏览器都支持"

从回答者的小提琴:

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

Answer 4

这有点接近.

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