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;

ただし、seperator-gradient クラスが実現できるのと同じ効果はありません。

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

その特定のテーブルのすべての td タグに class .seperator-gradient プロパティを適用します

あなたの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 に答える