css - 如何在 asp.net 网格上创建 3D 效果

Question

我正在处理 asp.net 网格。我想使用 CSS 在网格上应用 3D 效果。下面是我目前使用的 CSS。是否可以在下面的 CSS 中添加 CSS 以在 asp.net grid/html table 上实现 3D 效果？

.mGrid {
    width: 100%;
    background-color: #F1F7FE;
    margin: 5px 0 10px 0;
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}

.mGrid td {
    padding: 2px;
    border: 1px solid #ffffff;
    color: #001131; /*word-break:break-all;word-wrap:break-word;*/
    /*border-style: solid;
    border-width: 1px;
    border-color: #666 #DDD #DDD #666;
    padding: 3px;*/

}

.mGrid th {
    background-position: top;
    padding: 4px 2px;
    color: #1F364E;
    background: #B7D6FF url(../../Images/outlook/grid_head.png) repeat-x top;
    border: solid 2px #eeeeee;
    font-size: 0.9em; /*word-break:break-all;word-wrap:break-word;*/

}

.mGrid .alt {
    background-position: top;
    background: #D9EAFE repeat-x top;
}

Answer 1

通过使用 CSS3 after 或 before 伪元素，您可以解决表格单元格的行为与其他 HTML 元素略有不同的问题，并将它们放在 tds.

.mGrid td {
    padding: 2px;
    position: relative;
}

.mGrid td:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #666 #DDD #DDD #666;
    padding: 3px;
}

JS-Fiddle