1

我有一个 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;

但它与分隔梯度类可以实现的效果不同。

4

3 回答 3

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

于 2013-09-20T05:56:56.013 回答
1

将类 .seperator-gradient 属性应用于该特定表的所有 td 标记

在你的 CSS 中

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 */
}
于 2013-09-20T05:58:26.780 回答
0

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

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

于 2013-09-20T06:28:25.363 回答