Box阴影里面TR标签 [英] Box Shadow inside TR tag

问题描述

我试图为表中的 TR 元素创建一个插入框阴影效果，但没有成功。
我使用以下CSS：

I am trying to create an inset box shadow effect to a TR element inside a table but with no success. I am using the following 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 元素？

推荐答案

c> tr 以显示 box-shadow 是要设置 display：block; 在 tr 元素，虽然这意味着该行将不再匹配表宽度：

The only way I've found to enable a tr to show a box-shadow is to to set a display: block; on the tr element, though it means the row will no longer match the table width:

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。

This works on both Firefox 4 and Chromium 10.x, but fails on 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: block on tr elements, or even Firefox and Chrome running on different platforms.

这篇关于Box阴影里面TR标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！