仅对 <div> 的两侧应用投影。可能使用 css3 渐变和边框图像？答案

【问题标题】：Apply drop-shadow to only two sides of a <div>. Possibly with css3 gradients & border-image?仅对 <div> 的两侧应用投影。可能使用 css3 渐变和边框图像？
【发布时间】：2011-06-22 03:54:51
【问题描述】：

我正在尝试创建一种效果，该效果显示 div 有点消失在内容背景中。这个想法是有一个简单的边框：1px #000 solid;在 div 的顶部和底部，然后在左侧和右侧有一个大的嵌入阴影，以使 div 看起来继续回到页面后面，就好像背景中有一个 div 可以穿过的狭缝。

Box-shaodw 目前只能同时在所有方面工作。所以我需要一种方法来获得左右两侧的大阴影，但仍然能够访问阴影下方的内容。这就是css阴影的荣耀，你可以。图片根本不起作用，因为那样您将无法在其下方点击。

这篇文章中有人建议使用border-image 并将css3 渐变放入其中。这伤害了我的大脑，当我尝试将 css3 渐变放置到 div 一侧的边框时，我开始感到非常困惑。

谁能帮忙？

这是页面，如果您想看一下。我正在尝试在图像滑块上执行此操作。

http://designsweeter.com/

【问题讨论】：

«一张图片根本不起作用，因为那样您将无法点击它。»事实上，你可以。 .passthrough { pointer-events: none; }

标签： html css gradient shadow

【解决方案1】：

你可以有多个盒子阴影，用逗号分隔。我想你很容易从这里弄清楚，如果不是我可以详细说明。

【讨论】：

我认为你不明白我在做什么。阅读更多。
是我没看懂问题，还是你没看懂答案？（这是有道理的，考虑到它有多短）所以这里有一个简单的例子：jsfiddle.net/leaverou/mtDYp 你也可以使用 CSS3 渐变。

【解决方案2】：

看看solution proposed here。他们用几种边框颜色伪造渐变，您可以使用 rgba() 来模拟透明度。

您将无法有一个干净的跨浏览器实现，因为 Firefox 5 仍然需要一个实际的 url() parameter for the border image attribute。

最好的办法是使用CSS masks（仅限Webkit）

【讨论】：

哎呀，真的。一个只支持firefox，一个只支持chrome和safari？
使用 webkit 蒙版，我会在 photoshop 中制作一个 div 大小的方形图像，在每一端放置阴影，然后将蒙版应用于 div 以便它覆盖在顶部，但功能会保留在下面吗？
您的解决方案有效，但仅适用于两个浏览器。非常感谢，我了解了 webkit 掩码，它很棒，简单而且看起来很棒。我现在必须使用
隐藏方法。
除非有办法使用 rgba 和 firefox 边框颜色...：/

【解决方案3】：

Here I tried styling surrounding elements 将阴影覆盖在内容上。它并不漂亮且难以扩展，但我认为它看起来像您所描述的那样。

它在侧面使用 w 潜水来添加横向阴影，并在底部使用额外的 div 来覆盖 div 的下阴影。

【讨论】：