TR标签内的盒子阴影[重复]

Question

我正在尝试为表格内的TR 元素创建插入框阴影效果，但没有成功。 我正在使用以下 CSS：

tr {
     -moz-box-shadow: inset 0 0 5px #888;
     -webkit-box-shadow: inset 0 0 5px#888;
     box-shadow: inner 0 0 5px #888;
  }

现场演示：http://jsbin.com/urage5/edit

不能在tr 元素上创建这种效果吗？

Answer 1

要保留正常工作的表，您需要设置td-元素的样式而不是tr。使用伪类:first-child 和:last-child 可以实现与样式tr 相同的外观。为 box-shadow 添加稍微不同的值就可以了——我还添加了 border-radius 以获得更好的说明：

td {
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
td:first-child {
    border-radius: 5px 0 0 5px;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
td:last-child {
    border-radius: 0 5px 5px 0;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

查看实时示例：http://jsfiddle.net/KtPdt/

更多选项请查看：https://stackoverflow.com/a/11002210/1106393

Answer 2

我发现启用tr 以显示box-shadow 的唯一方法是在tr 元素上设置display: block;，尽管这意味着该行将不再匹配表格宽度：

tr {
    -moz-box-shadow: inset 0 0 5px #888;
    -webkit-box-shadow: inset 0 0 5px #888;
    box-shadow: inset 1px 1px 5px #888;
    display: block;
}

td {
    padding: 0.5em; /* Just to spread things out a bit */
}

JS Fiddle demo.

这适用于 Firefox 4 和 Chromium 10.x，但在 Opera 11.01 上失败（都在 Ubuntu 10.10 上运行）。我无法访问 Mac 或 Windows，所以我不能说 Safari 或 IE 将如何处理 tr 元素上的 display: block，甚至是在不同平台上运行的 Firefox 和 Chrome。

Answer 3

Firefox 在 tr 标签上显示阴影很好。

谷歌浏览器有一个错误。投票this issue 以加快 Chromium 开发者的步伐。