css - CSS3 的替代品如果这不起作用和子标准，则带有淡出边缘的简单样式的标签标签踢了？

Question

替代 CSS3 < hr > 简单样式的标签，如果这不起作用，则在 hr 样式下方有一个标准 < hr > 标签的子语句或 else 语句，如下代码所示。

有带有淡出边缘的简单样式的 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)); 
 }

Answer 1

如果您担心后退，也许您最好以这种方式使用 hr，但是如果浏览器不支持 css 渐变，您可能可以将 hr 替换为带有图像的 div 或作为背景，以便能够检测到您可以使用Modernizr的此类功能。

一旦你在你的 html 上安装了modernizr，你可以使用 jQuery 测试你的客户端是否可以使用 css 渐变，我通常会这样做，但使用 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>