Question

我正在尝试为我的表格元素使用边框阴影。我试图通过CSS应用它。这是我的元素的css代码：

.table-chart td {
padding:15px;
box-shadow: 0px 3px 1px rgba(26,26,26,0.75);
}

但是，它会显示此结果：http://i1057.photobucket.com/albums/t390/Alexwileyy/chart_zps285429b1.png

我只希望它在每个表格边框的底部显示边框，我该如何实现这一点。（如果你想要我的CSS用于所有表元素注释，我会用它更新）

更新：这是我的完整CSS＆amp;我的表元素的HTML代码：

<div class="table-chart">
<div class="container">
<table class="background">
<tr>
    <th colspan="3"><h1>Game Charts</h1></th>
</tr>
<tr>
    <td><h1>1</h1></td>
    <td><img     src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td>
    <td><h3>Gran Turismo</h3><a href="#" class="view-review">View Review</a></td>
</tr>
<tr>
    <td><h1>2</h1></td>
    <td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td>
    <td><h3>Call of Duty:Ghosts</h3><a href="#" class="view-review">View Review</a></td>
</tr>
<tr>
    <td><h1>3</h1></td>
    <td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td>
    <td><h3>Killzone</h3><a href="#" class="view-review">View Review</a></td>
</tr>

</table>
</div>
</div>

我的CSS：

.background { 
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png") 
no-repeat;
height:500px;
width:424px;

}
.table-chart table {
float:right;
position:relative;
top:80px;
right:70px;
border-collapse:separate;
}
.table-chart tr td h3 {
width:150px;
text-align: center;
font-family:Arial;
font-size:20px;
position:relative;
top:-20px;
color:black;
}
.table-chart td a {
position:relative;
top:-20px;
}
.table-chart td img {
width:100px;
height:100px;
}
.table-chart th h1 {
text-align:center;
font-family:ubuntu;
color: #dd6a15;
text-shadow: 0 2px rgba(0,0,0,0.75);
}
.table-chart td {
padding:15px;
box-shadow: 0px 3px 1px rgba(26,26,26,0.75);
}

我的边境阴影不起作用

0 个答案: