CSS TR标签内的方框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5605308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Box Shadow inside TR tag
提问by Joel
I am trying to create an inset box shadow effect to a TRelement inside a table but with no success.
I am using the following CSS:
我正在尝试为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;
}
Live demo: http://jsbin.com/urage5/edit
现场演示：http: //jsbin.com/urage5/edit
Is it not possible to create that effect on a trelement?
是否无法在tr元素上创建这种效果？
采纳答案by David says reinstate Monica
The only way I've found to enable a trto show a box-shadowis to to set a display: block;on the trelement, though it means the row will no longer match the table width:
我发现让 atr显示 a的唯一方法box-shadow是display: block;在tr元素上设置 a ，尽管这意味着该行将不再与表格宽度匹配：
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 */
}
This works on both Firefox 4 and Chromium 10.x, but failson Opera 11.01 (all running on Ubuntu 10.10). I don't have access to either Mac or Windows, so I can't say how Safari, or IE will handle the display: blockon trelements, or even Firefox and Chrome running on different platforms.
这适用于 Firefox 4 和 Chromium 10.x，但在 Opera 11.01（均在 Ubuntu 10.10 上运行）上失败。我无法访问 Mac 或 Windows，所以我不能说 Safari 或 IE 将如何处理display: blockontr元素，甚至 Firefox 和 Chrome 在不同平台上运行。
回答by AvL
To preserve a functioning table you need to style the td-elements rather than tr. The same look as styling trcan be achieved by using the pseudo class :first-childand :last-child. Adding slightly different values to the box-shadow will do the trick - I also added border-radiusfor a better illustration:
要保留功能表，您需要设置td-elements 而不是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;
}
Check out the live example: http://jsfiddle.net/KtPdt/
查看现场示例：http: //jsfiddle.net/KtPdt/
For some more options also check out: https://stackoverflow.com/a/11002210/1106393
有关更多选项，请查看：https: //stackoverflow.com/a/11002210/1106393
回答by Leksat
Firefox shows shadow fine on tr tag.
Firefox 在 tr 标签上显示阴影很好。
Google Chrome has a bug. Vote this issueto hasten Chromium developers.
谷歌浏览器有一个错误。投票这个问题以加快 Chromium 开发人员的速度。
