仅将投影应用于的两侧。可能使用 css3 渐变 &边框图像？
我正在尝试创建一种效果，显示 div 消失在内容背景中。这个想法是有一个简单的边框：1px #000solid;在 div 的顶部和底部，然后在左侧和右侧插入一个大的阴影，使 div 看起来继续回到页面后面，就好像背景中有一个 div 可以穿过的缝隙。
Box-shaodw 目前只能同时在所有方面起作用。所以我需要一种方法来获得左侧和右侧的大阴影，但仍然能够访问阴影下方的内容。这就是CSS阴影的荣耀，你可以的。图像根本不起作用，因为这样您就无法在其下方单击。
这篇文章中有人建议使用 border-image 并在其中放入 css3 渐变。这伤害了我的大脑，当我尝试将 css3 渐变放入 div 一侧的边框时，我开始感到非常困惑。
有人可以帮忙吗？
这是该页面，如果您想看一下。我正在尝试在图像滑块上执行此操作。
I'm trying to create an effect that shows a div sort-of disappearing into the content background. The idea is that there is a simple border: 1px #000 solid; on the top and bottom of the div, then a large inset shadow on the left and right to give the appearance that the div continues back behind the page, as if there is a slit in the background which the div can travel through.
Box-shaodw currently only work on all sides at once. So I need a way to get a large shadow on the left and right, but still be able to access the content beneath the shadow. That's the glory of css shadows, you can. An image simply will not work because then you wouldn't be able to click under it.
Someone on this post suggested using border-image and putting a css3 gradient into it. It's hurting my brain, I start to get very confused when trying to place a css3 gradient into the border on one side of a div.
Can anyone help?
Here's the page, in case you'd want to take a look. I'm trying to make do this on the image slider.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你可以有多个盒子阴影，用逗号分隔。我想你很容易从这里弄清楚，如果不是我可以详细说明。
You can have multiple box-shadows, comma separated. I guess it's easy for you to figure it out from here, if not I can elaborate.
查看此处提出的解决方案。他们伪造了具有多种边框颜色的渐变，您可以使用 rgba() 来模拟透明度。
您将无法实现干净的跨浏览器实现，因为 Firefox 5 仍然需要实际的 边框图像属性的 url() 参数。
最好的办法是使用 CSS 掩码（仅限 Webkit）
Take a look at the solution proposed here. They fake a gradient with several border colors, you could use rgba() for those to simulate transparency.
You won't be able to have a clean cross browser implementation as Firefox 5 still needs an actual url() parameter for the border image attribute.
Your best shot would be to use CSS masks (Webkit only)
这里我尝试设置周围元素的样式以将阴影放在内容上。它不漂亮且难以扩展，但我认为它看起来像你所描述的那样。
它使用侧面的 w div 来添加横向阴影，并在底部使用额外的 div 来覆盖 div 的下阴影。
Here I tried styling surrounding elements to drop the shadow over the content. It's not pretty and hard to scale but I think it looks like what you describe.
It uses w dives on the sides to add the lateral shadows, and an extra div at the bottom to cover the lower shadow of the divs.