问题标签 [box-shadow]

我正在开发一个需要使用 CSS3 box-shadow 属性的项目。这很好，但我发现阴影的传播大小不能设置为父对象的百分比。

我完全理解 box-shadow 不是相加的，因此它不会以父级的大小作为参考。

但是考虑到我需要一个完全响应的站点，并且对象可以流畅地缩放（不仅在断点上），但这也带来了一个问题——我只能以绝对单位（em 或 px）将阴影设置为展开属性。

有什么解决办法吗？我想过在容器中使用内部容器（用于内容）（用于“阴影”——它没有模糊），但这会产生另一个问题——内部容器的垂直居中。

有什么解决办法吗？请不要使用 jQuery，只需纯 CSS。

Firefox 18 似乎无法识别-moz-box-shadow或box-shadowCSS 属性。

如果我使用border-color，一切正常。

我究竟做错了什么？

我怎样才能让这些空间被这个盒子阴影覆盖？

CSS-

只是一个小提琴

为了练习和娱乐，我正在寻求在一个元素中用纯 CSS 重新创建以下徽标

如果您注意到，每个“条”都有一个小的阴影灰色区域，这给它一种深度感。如果可能的话，我想用纯 CSS 创建这些。对我来说棘手的事情是，他们看起来像是在他们之上的酒吧里，所以它必须在单独的酒吧级别才能做到这一点，而不是对整个事情应用面具。

到目前为止，我已经能够使用伪元素和一些框阴影创建条形图，并使用渐变和 . 为 B 赋予颜色background-clip: text。

通常我会使用旋转的元素或蒙版来应用阴影，但由于我使用箱形阴影创建了条形，我不知道我将如何，或者即使我可以，将它们应用到单个阴影（从技术上讲，它们'都是一个影子，但我的意思是把它应用到一个酒吧而不覆盖其他酒吧）

这是我到目前为止所拥有的

我的代码

现在，我认为这是不可能的，但我总是对 SO 用户的独创性感到惊讶。

TL,DR如何在不添加更多元素的情况下创建这些对角线阴影？如果需要，我愿意接受替代方法而不是我正在使用的方法

编辑：这是最终结果

我正在尝试在具有“菜单项子菜单”类及其所有子项的 div 周围放置一个连续的框阴影。现在它似乎只把阴影放在“关于”项目后面。

HTML 代码：

SCSS代码：

这是我目前得到的：

这就是我想要得到的：

我在页面顶部有一个导航栏，它有一个box-shadow，但它似乎不适用于section下面带有背景 url 的元素。如果我注释掉该background属性，则阴影很明显。

这是代码笔：http: //codepen.io/himmel/pen/ByxeGR

这是标记：

这是CSS：

如何让阴影出现在背景图像上？

实际目标：仅使用 CSS 为瓷砖（一些包含图像）提供雕刻/浮雕外观。

问题： 我试图在瓷砖上使用四个具有透明度的嵌入框阴影来创建雕刻外观。不幸的是，四个半透明阴影在图块的角落相互重叠，产生了不希望的效果。

有没有办法防止盒子阴影在角落重叠？或者有没有其他可行的方法可以在这些瓷砖上实现透明的雕刻外观？

==> 演示

我正在尝试使用 css-drop 阴影和 css 过渡创建一组 3d 按钮效果。我让一切正常，看起来不错，但是当单击按钮时，阴影会移向按钮，我希望它留在一个地方，并且只让按钮移动。

这是一个codepen演示它现在的样子。

我尝试更改过渡时间，但无法使其正常工作。

注意：不要关注这段代码的目的，它只是一个极简的例子来突出遇到的问题。

当我使用该box-shadow属性时，它有时不适合元素的侧面，导致元素与其阴影之间的边距为 1px（或更少）。这是一个示例，transform用于提出问题（我认为这不是解决问题的唯一方法）：

如果您没有看到任何内容，请尝试查看全屏片段，然后调整您的浏览器大小（我遇到了 Chrome 和 Firefox 的问题）。下面是我制作的几张截图的图片，以及（明显的）预期结果：

有人遇到过这个问题吗？
看起来像浏览器，但我们能找到一种解决方法来避免这些边距吗？

编辑

我发现了一些新的东西：如果我在单边设置了一个盒子阴影，那么使用 Chrome 就不会出现间隙（它仍然存在于 Firefox 中）：

我创建了一个轮播，我想在轮播项目上添加 box-shadow 属性。这是不可能的，因为轮播的溢出：隐藏属性。

有没有办法克服它？

请检查这个小提琴

*由于某种原因，Carousel 无法正常工作，但您仍然可以看到 css 问题

HTML：

css（我没有在这里发布完整的 css 代码，因为它不可读，这里是关于这个问题的最重要的样式）：

JAVASCRIPT