2

それで、フェードアウト css3 hr タグをセットアップしようとしています。JSFiddle で動作しますが、自分のサイトでは解決できません。

サイト上の私の CSS クラス:

.about-sidebar{
    margin: 25px 0;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#1F1F1F), to(#FFD700), color-stop(50%, black));
}

HTML:

<hr class="about-sidebar" />

クラスを HR タグから取り出して div で囲んでみましたが、解決しません。

サイト: http://travisingram.net/サイドバーの "Welcome to my Blog" です。

Jsfiddle の動作: http://jsfiddle.net/ZTz7Q/1633/

4

1 に答える 1

1

Web サイトで機能しなかった理由は<hr>、グラデーション スタイルのクラスが含まれていなかったためです。現在、<hr>どちらに変更する必要がある<hr class="line">か、使用しているクラスだけがあります。

それとは別に、線形グラデーションには、より多くのサポートを得るために、いくつかの微調整とクロス ブラウザー プレフィックス ベンダーが必要です。

jsFiddle の例

私はあなたが望む色を知りません..しかし、ここでは黒から透明です。

.line {
    margin: 25px 0;
    height: 5px;
    background: black;
    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 2%, rgba(255,255,255,0) 90%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
}
于 2013-11-04T20:00:37.417 に答える