只在一边插入盒子阴影？

有没有可能以某种方式只有在一个div的插入框阴影？ 请注意，我在这里讨论的是一个插入的阴影框，而不是正常的外框阴影。

例如，在下面的JSFiddle中，您会看到插入的阴影在不同程度上出现在所有的四面。

我怎样才能让它只显示在顶部？ 或者至多只在顶部和底部？

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具有固定的宽度时应该是相同的）。 负边距弥补了宽度，并导致元素居中（而不是只有正确的部分隐藏）：

 .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可以在这里find： 只有框阴影插入底部的问题 。 它说：“对定义传播距离的第四长度使用负值，这经常被忽略，但是受到所有主要浏览器的支持”

从回答者的小提琴 ：

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

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上面会导致底​​部有一个方块阴影。
你可以在这里更红