css div表行边框淡入淡出

Question

使用display: table的div有没有办法使行边框渐渐消失？

以下fiddle of the table需要有this之类的行底部边框。

Answer 1

您可以删除您拥有的边框规则，并添加以下两条规则：

div.div-row:after{
    content:"";
    height: 1px;
    display: block;
    position: absolute;
    background: linear-gradient(to right, rgba(255, 0, 0, 0) 10%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 0) 90%);
    width:100%;
    left:0;
    margin-top:46px;
  /* W3C */
}
div.div-heading:after{
    content:"";
    height: 1px;
    display: block;
    position: absolute;
    background: linear-gradient(to right, rgba(255, 0, 0, 0) 10%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 0) 90%);
    width:100%;
    left:0;
    margin-top:36px;
  /* W3C */
}

<强> jsFiddle example