箱阴影TR标签

里面我想创建一个插图框阴影效果到表内，但没有成功TR元素。我使用下面的CSS：箱阴影TR标签

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元素上的效果呢？

来源

2011-04-09 Joel

是'td'设置为'transparent'的'背景color'？ – 2011-04-09 13:31:49

尝试更改它，仍然不起作用 – Joel 2011-04-09 14:07:38

请参阅我的答案（下面）以获得部分成功的解决方法。 – 2011-04-09 14:28:55

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

来源

2011-04-09 14:28:29

不幸的是，display：block会使元素不再排列在列中。 – raylu 2011-12-17 01:53:24

这是真的;不幸的是，它仍然是我知道启用“box-shadow”的唯一方式... =/ – 2011-12-17 04:11:27

我最终通过在单行colspan-ed单元格的行上下创建一行并应用箱子的影子。将行阴影应用于行中的每个单元格都适用，但前提是模糊和散布值为0px。 – raylu 2011-12-18 00:01:46

火狐显示了tr标签阴影罚款。

谷歌浏览器有一个bug。投票this issue以促进铬开发商。

来源

2011-09-12 11:55:31 Leksat

它可以是一个选择。因为我认为'box-shadow'被设计为仅适用于块。我的意见是，它应该适用于所有 – 2012-04-17 08:29:33

要保留您需要的样式td -elements而不是tr一个功能表。可以通过使用伪类:first-child和:last-child来实现与造型tr相同的外观。增加值有所不同的框阴影会做的伎俩 - 我还添加了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

来源

2012-06-12 17:52:22 AvL

+1这是安全的方式。我也做了一个手写笔的例子，在这里所有的边上都有边框：http://stackoverflow.com/a/18973828/586086 – 2013-09-24 06:02:09

回答

相关问题