Question

我正在使用asp.net网格。我想使用CSS在网格上应用3D效果。下面是我目前使用的CSS。是否可以将CSS添加到下面的CSS中以在asp.net grid / html表上实现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元素略有不同的问题，并将它们置于td之上。

.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

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

1 个答案: