1

这是小提琴的例子。

我有一个分隔符类：

 <div class='seperator-gradient'></div>

我还有一张桌子：

<table class="TABLE">
<tr>
    <td></td><td></td><td></td>
 </tr>
 <tr>
    <td></td><td></td><td></td>
 </tr>
   <tr>
    <td></td><td></td><td></td>
 </tr>

CSS 文件：

    .seperator-gradient{
width: 100%;
height: 1px;
border-bottom: 
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}


.TABLE{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.TABLE TR:nth-child(odd) { 
    background-color:#f0f0f0;
    height: 50px;
}
.TABLE TR:nth-child(even) { 
    background-color:#fff;
    height: 50px;
}
.TABLE TD {
    vertical-align: middle;
}

现在我希望表格的边框具有与我在分隔梯度类中实现的功能相同的功能...中间颜色强烈但左右变为较浅的颜色。这可能吗？

顺便说一句，表格的内容是在运行时使用下划线加载的：

       <table class="TABLE">
           {% _.each(datas,function(c){%} 
            <tr><td>{{ c.name }}</td>
            </tr>
          {% });%}
       </table>

这就是我想要实现的目标：

在此处输入图像描述

4

4 回答 4

3

您可以尝试将其作为边框，但浏览器支持非常有限。

通过多背景解决方案可以提供更好的支持。

.TABLE{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.TABLE TR:nth-child(odd) { 
    background: linear-gradient(to right,  #ffffff 0%,#2215B3 10%,#160202 50%,#272DA8 90%,#fcfcfc 100%), lavender;
background-size: 100% 1px, 100% 100%;
background-position: left bottom, left top;
background-repeat: no-repeat;
height: 50px;
}
.TABLE TR:nth-child(even) { 
background: linear-gradient(to right,  #ffffff 0%,#2215B3 10%,#160202 50%,#272DA8 90%,#fcfcfc 100%), white;
background-size: 100% 1px, , 100% 100%;
background-position: left bottom, left top;
background-repeat: no-repeat;
    height: 50px;
}
.TABLE TD {
    vertical-align: middle;
}

我稍微改变了渐变颜色，因为在奇数条带中很难看到灰色。

我正在做的基本上是设置一个像你这样的渐变背景（我只使用了 w3c 版本，但你可以添加前缀版本），它位于底部，1 px 高度。

小提琴

正如评论中所指出的，在几个浏览器中存在一个关于表格行背景尺寸的错误。如果有多个 td，这会破坏设计。

一种可能的解决方法是将行显示为块：（不确定可能的副作用，将取决于您的所有布局）

.TABLE tr {
    display: block;
}

小提琴

另一种可以使用并且可能得到更广泛支持（并且没有评论问题）的技术是在表格背景中设置水平渐变。然后，在行中，设置透明度为 1 px 的垂直渐变。在这个透明条纹中，背景将显示

.test2 {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
    position: absolute;
    background: -webkit-linear-gradient(0 deg,  #ffffff 0%,#2215B3 10%,red 50%,#272DA8 90%,#fcfcfc 100%);
    background: linear-gradient(to right,  #ffffff 0%,#2215B3 10%,red 50%,#272DA8 90%,#fcfcfc 100%);
}
.test2 tr {
    height: 50px;
}
.test2 TR:nth-child(odd) { 
    background: -webkit-linear-gradient(90deg,  transparent 0px, transparent 1px, lavender 1px, lavender 100%);
    background: linear-gradient(0deg,  transparent 0px, transparent 1px, lavender 1px, lavender 100%);
}
.test2 TR:nth-child(even) { 
    background: -webkit-linear-gradient(90deg,  transparent 0px, transparent 1px, white 1px, white 100%);
    background: linear-gradient(0deg,  transparent 0px, transparent 1px, white 1px, white 100%);
}
.test2 TD {
    vertical-align: middle;
}

演示 3

于 2013-09-20T16:07:08.587 回答
0

我不相信你可以用边界做到这一点。但是您可以将表格包装在 div 中，将背景渐变应用到 div，然后挤压表格和 div 使其看起来是边框。

于 2013-09-20T13:59:12.980 回答
0

看看这些CSS 技巧。

他们曾经border-image实现这一目标。像这样的东西： -

.top-to-bottom {
border-width:3px;
-webkit-border-image: 
    -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
    -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
         -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
       -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;

}

于 2013-09-20T14:08:45.523 回答
0

是的

.TABLE TR:nth-child(odd) td { 
     border: 1px solid black;
        margin: 5px;

}
.TABLE TR:nth-child(even) td { 
     border: 1px solid blue;
        margin: 5px;

}

偶数行有蓝色边框，奇数行有黑色边框。希望这有效

设置左上角右下角的样式

.TABLE TR:nth-child(odd) td { 
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         border-left: none;
         border-right: none;
         margin: 5px;

    }
    .TABLE TR:nth-child(even) td {
         border-top: 1px solid blue;
         border-bottom: 1px solid blue;
         border-left: none;
         border-right: none;
         margin: 5px;

    }

现在顶部和底部边缘的偶数元素将有蓝色边框，奇数元素同样是黑色的

于 2013-09-20T14:34:45.617 回答