2

CSS3 の代わりに、フェードアウト エッジを持つ単純なスタイルの < hr > タグが機能しない場合は、次のコードのように、標準の < hr > タグの子ステートメントまたは else ステートメントを hr スタイルの下に配置します。

フェード アウト エッジを持つ単純なスタイルの CSS3 < hr > タグがあります。リンク http://css-tricks.com/simple-styles-for-horizo​​ntal-rulesを参照してください。

フェード アウト エッジを持つこの < hr > シンプルなスタイルが機能せず、代わりに標準の < hr > キンクインが使用される場合、フォールバックはありますか? 私はjQuery1.6.4を使用していますアドバイスしてください?

 hr { border: 0; height: 1px; 
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));       
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 width:100%; 
 }

 .hr { border: 0; height: 1px; 
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));       
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 }
4

1 に答える 1

3

フォールバックが心配な場合は、そのように hr を使用する方がよいかもしれませんが、おそらく hr を、画像を含む div に置き換えるか、ブラウザが CSS グラデーションをサポートしていない場合は背景として使用できます。Modernizrを使用できるそのような機能を検出します。

HTML に Modernizr を配置したら、クライアントが CSS グラデーションを使用できるかどうかを jQuery でテストできます。通常はこのように実行しますが、Modernizr js API を使用してこれを行うより良い方法があるかもしれません。

それがあなたのために働くかどうか私に知らせてください、そして幸運を祈ります！

HTML

<hr>
<hr>
<hr>
<hr>

CSS

hr {
    border: 0; height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));       
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    width:100%; 
}

.hr {
    border: 0; height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));       
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.no-js .glossy,
.no-cssgradients .glossy {
    background: url("images/glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}
​

JS

(function($){
if( $('.cssgradients').length == 0 ){
    // no css gradients
    $('hr').each(function(index){
        // replace for image maybe?
    });
}
}(jQuery);

</p>

</p>

于 2012-05-10T17:38:07.310 に答える