问题标签 [box-shadow]

我正在制作一个 960px 的模板，但在挤压浏览器窗口时遇到了问题。每当我使窗口小于我的元素最小宽度时，右侧的框阴影就消失了。为什么会这样？

HTML：

CSS：

我定义了以下css属性：

盒子阴影：#CCCCCC x2 y2 blur2；

但是，当我在浏览器上运行时，它会显示无效的属性/值。这里有什么问题？

我有一些列表元素，它们后面有一个 css 三角形箭头。我想box-shadow在箭头周围添加，但不知道为什么我的阴影不起作用。我尝试过其他解决方案，但这些解决方案使用::after伪元素来制作三角形，但我的三角形是一个单独的div. 任何帮助深表感谢。

PS：尝试在灰色三角形周围放置阴影，黑色不需要任何阴影。

为什么这个 CSS 在框架/环境/浏览器中的应用不一致？

我在 Meteor 中创建了一个原型，其中 CSS 在创建阴影效果和在悬停时为各种图像添加边框方面效果很好；具体来说，在 Meteor 原型中（它是一个 Sharepoint 应用程序，但使用 Meteor 测试这样的功能要快得多）我有这个 CSS：

它工作正常 - 在 mouseenter / 悬停在图像中时，它会产生金色的五点钟阴影。

但是，Sharepoint 代码中的内容几乎相同：

...仅适用于 Chrome 和 Firefox（不适用于 IE8）。

我试过这个，据说可以在 IE8 中工作：

...但它不起作用（不向 IE8 添加框阴影）。

我能做些什么让盒子阴影在 IE8 中工作？

我在这里问了一个关于让 box-shadow 在 IE 上工作的问题。

但事实证明，IE 并不是真正的问题——IE会产生阴影，如下所示：

上面的尖叫声来自在 localhost 上运行的 Meteor 应用程序；但是，当我尝试在 Sharepoint 站点中（在页面上的内容编辑器 Web 部件上）完成阴影效果时，我没有得到框阴影：

工作（流星）的CSS是：

因此，在没有任何特定于 IE 的指令的情况下，阴影也可以在 IE 中正常工作！

非工作（Sharepoint 内容编辑器 Web 部件）的 CSS 是：

注意：我在一堆msdn杂志上发誓，我不久前查了IE版本，是IE8，但我去验证它实际上是IE11！但是，即使在这个相对较新的 IE11 版本中，box-shadowing 还是失败了！

我得到的一个较早的建议是试试这个：

......但这并没有做任何事情。

我也试过：

最后，我之前的问题（链接到上面）的答案建议：

progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft。阴影(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa ,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength =5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

但是这些都行不通。为什么阴影在 IE 上适用于本地运行的 Meteor 应用程序，但不适用于 Sharepoint Server 提供的内容编辑器 Web 部件？它们都在“InPrivate”IE 会话的同一个实例上运行。

我在 James Johnson 的回答中发现的一种可能性表明，我的标记中可能有这一行：

……是问题所在。但是我没有明确添加该行，也不知道它来自哪里，或者，如果我确实知道它来自代码库中的哪里，并且我要删除它，它可能会对 Sharepoint 网站的其他地方造成什么破坏。

作为记录，来自工作 Meteor 应用程序的“查看源代码”完全不同，并且不包含“元”标签。它完全是一种“不同的动物”；对于好奇的人，这里是完整的：

更新

我想知道，因为这似乎是一个 Sharepoint HTML 问题，我将不得不恢复尝试通过 jQuery 解决它，例如在“悬停”事件处理程序切换器（mouseenter、mouseleave）中。我最初是沿着这条路走的，但后来改用更优雅的纯 CSS 方法。像 IE 之类的东西——Web 开发人员工作时间存在的祸根）使优雅更难以实现。

我有一个带有插入框阴影的 div，并且该 div 中有我希望阴影显示的链接，但仍然可以点击链接。

这是一个例子：https ://jsfiddle.net/5rsbn927/

#navbar div 有阴影，链接都是内联块。

我似乎什么也做不了。z-index（带定位），指针事件，：之前，到目前为止都没有工作。我唯一一次设法让阴影显示在链接上方，它们不可点击。

为了记录，这是它应该看起来的样子；我只想更改背景，但在链接悬停时保持相同的阴影：http: //i.imgur.com/rOe6uH1.png（我也更改了 jsfiddle 中的颜色，以便更容易看到）。

在这一点上，我真的不在乎它是否需要 jQuery 或 box-shadow 以外的其他东西；它只需要看起来正确。

我正在使用 3 个带有面板标题的引导面板col-md-4，在每个面板的底部我有 box-shadow，面板的最大高度为 300px。面板内的文本比面板本身长。我想使用它overflow: scroll，但是当我使用overflow: scroll它时，它会“覆盖”盒子阴影（我明白为什么）。我已经搜索了一段时间这个看似简单的解决方案，但一无所获。

我已经排除了 box-shadow 样式和其他两个面板以保持下面的清洁。

您可以在这里看到我遇到的问题：https ://jsfiddle.net/xa6b8qmm/

我正在使用overflow: hidden，因为我想隐藏滚动条

但是，这隐藏了元素的左右阴影。

我找不到隐藏滚动条的方法，同时又允许 box-shadow 属性的左侧/右侧可见。

有任何想法吗 ？

CSS：

HTML：

在我多年的网页设计中，我注意到 CSS 的 box shadow 资源非常昂贵，导致许多旧手机严重滞后；但是文本阴影就是这种情况吗？什么时候可以使用 text-shadow，它是如何渲染的？

我有一个简单的表格，带有box-shadow，但我想从任何阴影中排除第一个单元格。

我已经尝试添加box-shadow: none到该单元格，但它不会覆盖整个表格上的阴影。我什至不确定这是否可能？

HTML：

CSS：

这是一个显示表格示例的小提琴

这可能吗？

更新

我所说的第一个单元格是指与班级一起排的第一个单元格header-table .header td {}

这是完美结果的图像：