css - 替代 CSS3 简单样式的标签，如果这不起作用并且使用子标准 标签代替，则具有淡出边缘？

Question

替代 CSS3

---

简单样式的标记，如果这不起作用，则在 hr 样式下面使用子语句或标准

---

标记的子语句，如下代码所示。

有淡出边缘的简单样式的 CSS3

---

标签见链接 http://css-tricks.com/simple-styles-for-horizontal-rules .

如果这个带有淡出边缘的

---

简单样式不起作用，而是标准的

---

扭结，是否有后备方案？我正在使用 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 渐变，I normally do it like this ，但使用 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);