Question

我有一个css类来分隔内容：

HTML：

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

的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 */
}

这个工作正常，但是现在，我有一张桌子，我想这个桌子的每个单元格底部都有与上面相同的功能。是否有可能实现这一目标？

此刻，我将表格的css设为：

    border-bottom: 1px solid;

但它与seperator-gradient类无法实现相同的效果。

Answer 1

目前仅在少数几种浏览器中支持：

-webkit-border-image: -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)) 0 0 1 1 repeat repeat;

以下是支持的浏览器：http://caniuse.com/#search=border-image

Answer 2

应用类.seperator-gradient 属性到该特定表的所有td标签

在你的css put中

table td {
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 */
}

Answer 3

这是一些有用的渐变效果。

http://css-tricks.com/examples/GradientBorder/

如何使用渐变样式表底部边框

3 个答案: