html - 仅在一侧的Inset Box Shadow?

有可能以某种方式只在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;   
}
Ahmad asked 2019-09-11T04:33:35Z
5个解决方案
193 votes

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

有关更多示例,请参阅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);
}
Gordon Tucker answered 2019-09-11T04:33:57Z
13 votes

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

然后,添加更多填充到.inner-box以弥补增加的宽度。

这是逻辑的样子:

box logic

以下是CSS中的完成方式:

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

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

110%比父级宽,在子级上下文中为100%(例如,当父级.inner-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;
}

这是一个工作小提琴。

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

.box .box-inner .text

casraf answered 2019-09-11T04:35:23Z
7 votes

这有点接近。

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}
mohkhan answered 2019-09-11T04:35:48Z
7 votes

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

从回答者的小提琴:

box-shadow: inset 0 -10px 10px -10px #000000;
drkario answered 2019-09-11T04:36:21Z
1 votes

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

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因为你底部有一个盒子阴影。
你可以在这里更红了

Hamid Talebi answered 2019-09-11T04:37:03Z
translate from https://stackoverflow.com:/questions/17572619/inset-box-shadow-only-on-one-side