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-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;
}

查看实例:http://jsfiddle.net/KtPdt/

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

Answer 2

我发现启用a tr显示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 */
}

JS小提琴演示.

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

Answer 3

Firefox在tr标签上显示阴影.

谷歌浏览器有一个错误.投票这个问题加速Chromium开发人员.