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。通过使用伪类tr和:first-child，可以实现与样式:last-child相同的外观。为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的唯一方法是在display: block;元素上设置tr，但这意味着该行将不再匹配表格宽度：

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将如何处理display: block tr元素，甚至是在不同平台上运行的Firefox和Chrome。< / p>

Answer 3

Firefox在tr标签上显示阴影。

Google Chrome有一个错误。投票this issue加速Chromium开发人员。

TR标签内的盒子阴影

3 个答案: