Css 某些浏览器上不显示表行上的框阴影

表行上的CSS框阴影-

tr

-在不同浏览器中似乎工作不一致。在某些浏览器上显示阴影；在其他人身上，没有阴影

我正在使用以下CSS：

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

以下是以下片段的一部分：

tr{
背景色：rgb（165182229）；
盒影：0px 2px 2px黑色；
-moz盒阴影：0px 2px 2px黑色；
-webkit盒阴影：0px 2px 2px黑色；
}
td，th{
填充物：5px；
文本对齐：左对齐；
}

一个
两个
标题
三
四
标题2
五
六
标题3
七
八
标题4
九
十

它背后的原因似乎是默认的CSS——

显示：块是最大的因素

CSS/HTML/Demo


tr{
背景色：rgb（165182229）；
显示：块；
边缘底部：5px；
-moz盒阴影：0px 2px 2px黑色；
-webkit盒阴影：0px 2px 2px黑色；
盒影：0px 2px 2px黑色；
}
td，th{
填充物：5px；
文本对齐：左对齐；
}

一个
两个
标题
三
四
标题2
五
六
标题3
七
八
标题4
九
十
如前所述，
框阴影
属性仅适用于具有
显示：块
或
显示：内联块
属性的元素

如果将
display:block
作为常规样式规则添加到表格单元格，它将崩溃，因为单元格与
display:table
的自动宽度/高度比例将不再应用。要模拟这种行为，只需为每个
th
和
td
指定
minwidth
属性

然后对行应用
框阴影
（悬停或不悬停）

总之，您的代码应该如下所示：

table { box-sizing: border-box; }
td, th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; }

为了简单起见，我省略了供应商前缀

以下是完整的示例：


表格{
框大小：边框框；
边框底部：1px实心#e8e8e8；
}
运输署，
th{
左侧填充：16px；
最小宽度：170px；
边框：1px实心#e8e8e8；
边框底部：无；
字体：14px/40px；
文本对齐：左对齐；
}
运输署{
颜色：#666；
}
tr{
显示：块；
}
th{
颜色：#333；
}
tr：悬停{
背景色：#fbfb；
盒影：0px 2px 18px 0px rgba（0,0,0,0.5）；
光标：指针；
}

电话号码
日期
名称
标签
0342443
2013年8月10日
凯特
爱猫
0342442
2013年8月9日
玛丽
没趣的
0342441
2013年8月8日
安娜
喜欢极端的东西
如果您希望看到此错误得到修复，请将其标记为星形：


如果希望表格单元格宽度继续自动调整，可以将阴影应用到各个单元格：

td:first-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset 11px 0px 8px -10px blue; 
}
td {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue;
}
td:last-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset -11px 0px 8px -10px blue; 
}

完整的例子。（jsfiddle）

（灵感来自）

每个框中的阴影值：


调整第三个数字（模糊半径）以更改模糊半径
第四个数字（扩散半径）必须始终为负数，其绝对值必须大于第三个数字（模糊半径）
使第一个数字（偏移量x）非零，以在左侧或右侧获得阴影。使其绝对值1大于第四个数字的绝对值（再次参见上面的示例，更容易理解我的意思）
使第二个数字（偏移量y）非零以在顶部或底部获得阴影。使其绝对值1大于第四个数字的绝对值
我也有同样的问题。我正试图突出显示整行，这时鼠标在上面。下面是它的css代码：

tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

它可以在Mozilla Firefox（38.0.1）和Internet Explorer（11.0.9600.17801）上正常工作，这两种浏览器都在Windows 7上。但是，在铬上不起作用（43.0.2357.81）

因此，我不得不变通，我混合了Sviatoslav Zalishchuk和David Winiecki的答案。结果我得到：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    tr:hover td:first-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset 11px 0px 8px -10px #337AB7;
    }

    tr:hover td {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7;
    }

    tr:hover td:last-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset -11px 0px 8px -10px #337AB7;
    }
}

tbody > tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

这很好，并且不会破坏表的列宽，仍然可以在Mozilla和Explorer上工作

下面是一个完整的示例：


表格{
框大小：边框框；
边界塌陷：塌陷；
}
运输署，
th{
左侧填充：10px；
右边填充：10px；
边框：1px实心#dddddd；
字体：14px；
文本对齐：左对齐；
}
/*仅在Chrome和Safari上工作*/
@媒体屏幕和（-webkit最小设备像素比：0）{
tr:悬停td:第一个孩子{
方框阴影：插图0px 11px 8px-10px#337AB7，
插图0px-11px 8px-10px#337AB7，
插图11px 0px 8px-10px#337AB7；
}
tr：悬停td{
方框阴影：插图0px 11px 8px-10px#337AB7，
插图0px-11px 8px-10px#337AB7；
}
tr:悬停td:最后一个孩子{
方框阴影：插图0px 11px 8px-10px#337AB7，
插图0px-11px 8px-10px#337AB7，
插图-11px 0px 8px-10px#337AB7；
}
}
/*在其他浏览器上工作*/
tbody>tr：悬停{
大纲：无；
-webkit盒阴影：插图0 0 10px#337AB7；
盒影：嵌入0 10px#337AB7；
}

名称
天生的
城市
大卫·吉尔莫
1946年3月6日
英国剑桥
罗杰·沃特斯
1943年9月6日
英国萨里
尼克·马森
1944年1月27日
英国伯明翰
理查德·赖特
1943年7月28日
英国伦敦
现在，在v53 Chrome中，它已修复，并且盒影可以很好地工作

CSS/HTML/Demo


表格{
边界间距：0 10px；
边界塌陷：分离；
} 
t车身{
显示：表格行组；
垂直对齐：中间对齐；
}
tr{
边缘底部：9px；
}
tr：悬停{
盒影：0 5px 8px 0 rgba（50,50,50,0.35）；
-网络工具包盒阴影：0 5px 8px 0 rgba（50,50,50,0.35）；
-moz盒阴影：0 5px 8px 0 rgba（50,50,50,0.35）；
}
tr:hover                { background: #EEF0F3; cursor: pointer; }
tr:hover td:first-child { box-shadow: inset 2px 0 0 0 #323335; }

tr:hover td             { box-shadow: 0 1px 0 0 black, 0 -1px 0 0 black; }
tr:hover td:first-child { box-shadow: 0 -1px 0 0 black, -1px 0 0 0 black, 0 1px 0 0 black; }
tr:hover td:last-child  { box-shadow: 0 -1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; }

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.select_row{
    color: #43B149;
    font-weight: bolder !important;
    background: #e4e5e6 !important;
    box-shadow: 1px 0px 1px 0px #cad6ce !important;
    -moz-box-shadow:1px 0px 1px 0px #cad6ce !important;
    -webkit-box-shadow:1px 0px 1px 0px #cad6ce !important;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    td{box-shadow: 0px 3px 0px 0px #cad6ce !important;
        -moz-box-shadow:0px 3px 0px 0px #cad6ce !important;
        -webkit-box-shadow:0px 3px 0px 0px #cad6ce !important;
        background: #e4e5e6 !important;
    }
}
.table-forecast{
    border-collapse: separate;
    border-spacing: 0px;
}

.project-row { 
   box-shadow: 0 0 15px 0 black;
}

.project-row { 
   filter: drop-shadow(0 0 9px black);
}