我正在尝试在两个元素上添加一个盒子阴影，每个元素的宽度都是可变的。我想要的结果如下所示：

我一直试图用一个覆盖重叠框阴影的伪元素来达到这个结果，但是因为它们需要具有透明度，我似乎无法找到一个解决方案，其中框的边缘既没有小的重叠伪元素也不会调整到正确的宽度。顶框也不一定需要顶边框来解决我的问题。

小提琴

HTML：

SCSS：

编辑：

通常我不会考虑使用 JS 进行布局，但由于在我的特殊情况下，这些框在用户交互发生之前是不可见的，所以我使用了一个脚本来解决我的问题。当 dom 准备好时，脚本会判断顶部元素是否大于底部元素，并分别为其添加“大”或“小”类。通过知道这一点，我们知道伪元素的宽度应该继承哪个元素。只要不以会改变哪个元素更大的方式调整元素的大小，就可以正常工作。

还有一个更简洁的解决方案，不需要 JS 和一个伪元素，以防只需要 box-sizing blur 而不需要传播。

小提琴：

模糊和传播结合（JS），

只有模糊，没有传播（无 JS）

最终结果并不完美，正如您在此屏幕截图中看到的那样，所有白色背景都被替换为黑色：

当您查看左侧框的左上角时，您可以看到边框阴影有轻微的曲线。无论如何，它离我很近。

如果有人仅使用 css 找到与第一个小提琴类似的结果的解决方案，我将不胜感激。

我正在尝试在两个不同宽度的 div 周围放置一个 CSS 盒子阴影，并以某种方式隐藏中间的重叠阴影，以获得像右下方图像一样的无缝外观。

我尝试在第一个元素上添加一个白色边框并让它在第二个元素上展开，但边框出现在盒子阴影内。我也尝试在容器上放置一个盒子阴影，但它使阴影变成正方形，这不是我想要的。有什么办法可以达到这种效果吗？

我的尝试：http: //jsfiddle.net/1vy2q4L0/

我目前正在一个网站上工作，该网站的设计主要“欢迎文字”包含多行（因为它是关于产品的简短介绍）。这有一个透明（0.7）白色的背景（rgba(255,255,255,0.7)带有多行填充。是的，我说的是多行填充。这意味着，每一行文本都有顶部、底部、左侧和右侧填充、背景颜色以及一个小的线条之间的透明空间。

为了实现这一点，我使用了一个带有水平偏移的 box-shadow 来模拟每行的左右填充。这适用于除 Internet Explorer 之外的所有浏览器。由于我们希望网站可以在所有浏览器上运行，因此我尝试修复此问题一段时间，但我几乎得出结论，这只是 Internet Explorer 问题。

我使用了 Geoff Muskett 他的例子（http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/），它确实有效IE除外。

问题是当我在 IE 中打开页面时，即使我将模糊设置为 0 像素，框阴影似乎也显得有些模糊。（或者只是没有添加它，两者都不起作用）。

甚至 Geoff 他的示例中的代码也不起作用：

HTML

CSS

这里有没有人知道这个问题并且知道是否有一个不是很hacky（不是首选）的解决方案？

IE 11.0.9600.17905

编辑

2015 年 8 月 3 日 09:32

这个周末我一直在调查这个问题，发现一些人的帖子与我目前遇到的问题完全相同。这似乎是 IE 中的渲染错误。请参阅：https ://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow

同样在另一篇 StackOverflow 帖子中，名为 @nickmorss 的人说使用box-shadow来完成多行填充文本在 IE11 和 FF34+ 中不起作用。它可以在 FF 中使用box-decoration-break: clone;，但这在我这边不起作用。

我认为这是我自己无法在 CSS 中修复的，因为这可能只是一个错误。

我已经找到了答案，但我不确定这是解决我的问题的最佳方法。我的页面有两个面板：一个侧边栏和一个内容视图。我想在侧边栏上有一个阴影，就好像内容视图正在生成它一样：

问题是我的侧边栏是一个带有按钮、图标等的菜单。所以如果我尝试在那里设置（插入）阴影：

我得到：

所以，在我有按钮的地方，它们隐藏了阴影。如果我以其他方式执行此操作，则内​​容视图实际上会生成它：

我得到了内容的阴影，但如果内容比屏幕的总高度“短”，阴影就会消失。与上一个案例类似。

我的最终方法是为内容视图或使用 Javascript 设置手动高度，以使其适应视口高度。但我不确定这是最好的方法。我想知道是否有更多的CSS方式来做到这一点，而无需手动设置或削减阴影。

编辑

在创建小提琴以更好地理解我的问题时，我意识到我background-color在按钮上有一个。但由于我在按钮上有一个hover和一个transition，它仍然隐藏了阴影。看看：http: //jsfiddle.net/h3cp59qd/

我正在尝试制作带有嵌入边框的木框。我制作了一个边框图像并对其应用了一个插入和常规的框阴影。常规阴影可以很好地用作投影。插图阴影偏移了许多像素。出了什么问题，可以修复吗？我试图让嵌入的阴影正好靠在木框架上，而不是离它几个像素，进入文本打印的地方。

I've been trying for ages to figure out why the box shadow on my top menu is not visible when you first navigate to each page, but appears once you start scrolling.

This is the site: http://gourmetsailing.co.nz/DRAFT/charters.html

The class with the shadow is .navbar-wrapper

It's worth mentioning that I am also using stickUp to get the menu to stick to the top of the page: http://lirancohen.github.io/stickUp/

Perhaps some kind of conflict with that script?

我有一个小问题，我想为图片创建 45 度阴影。但是，如果我使用我的代码，我的对象也会旋转。所以我想就这个问题寻求帮助。

我的代码：

这是我的小提琴。

基本上我有一个父 div 需要在它周围有一个盒子阴影，由于各种原因，这个盒子阴影必须是一个伪元素。此框阴影可防止在此父 div 的子级上捕获悬停事件。我怎样才能解决这个问题？

我可能需要你的帮助。我尝试使用图像作为 div 的背景，并用box-shadow. 问题是它在 Firefox 和 Internet Explorer 的边界上仍然显示为背景图像的一个像素，只是谷歌浏览器按预期显示它。

这是实际页面的链接：发生错误的页面。我希望有人可以帮助我。

顺便提一句。我尝试为第二个（野蛮人）使用未缩放的图像，但没有任何区别：/

我很感谢任何建议，费雷尔

在哪里可以找到有关 css 中高级边框和框阴影的教程？

我发现了 css 的形状，但无法解释：

关联

谁能解释一下它是如何工作的？这适用于所有浏览器吗？

谢谢。