CSS盒子阴影在Chrome上无法工作

Question

CSS盒子阴影在Chrome上无法工作

4

CSS box-shadow在Mozilla上可以使用，但在Chrome上不行。如果我在div上使用这个类（即带有id为mydiv的div），它就能工作！为什么我不能在tr标签上使用box-shadow？

<!DOCTYPE html>                                                    
<html lang="en">                                                   
    <head>                                                         
    <style>
        .item_row:hover {
        box-shadow: 0px 0px 8px 2px #CCCCCC inset;                 
        -moz-box-shadow: 0px 0px 8px 2px #CCCCCC inset;            
        -webkit-box-shadow: 0px 0px 8px 2px #CCCCCC inset;         
        }                                                          
    </style>
    </head>
    <body>
        <div id='mydiv'>
            <table>
                <tr class='item_row'>                              
                <td>test</td>
                </tr>                                              
            </table>                                               
        </div>
    </body>
</html>

- nizam.sp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Cross · Accepted Answer

是的，在Chrome中进行了测试。不要将CSS应用于tr，而是应用于子td：

.item_row:hover td {
  box-shadow: 0px 0px 8px 2px #CCCCCC inset;                 
  -moz-box-shadow: 0px 0px 8px 2px #CCCCCC inset;            
  -webkit-box-shadow: 0px 0px 8px 2px #CCCCCC inset;         
}