2

我正在尝试在大型表面上的 safari 中使用拉丝金属效果。这个想法来自这里：http ://simurai.com/post/9214147117/css3-brushed-metal

话虽如此，在 Safari 中，渐变是关闭的，并且在较大的宽度处有粗的白色和黑色线条，这破坏了效果。我尝试过调整渐变，经过多次尝试，我未能成功摆脱粗线。

在其他浏览器（包括 Chrome）中看起来不错。据我所知，该问题仅发生在 Safari 中。

JS Fiddle 为方便起见：http: //jsfiddle.net/Qzdme/2/

相关CSS：

    /* Setting min-width because problem is only noticeable at larger widths */
    min-width: 900px;           
    background-image:   -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),                    
                        -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),                    
                        -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
                        -webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%, 
                                                        hsl(0,0%,90%) 47%, 
                                                        hsl(0,0%,78%) 53%,
                                                        hsl(0,0%,70%)100%);

更新：我能够通过增加第二个重复线性渐变的亮度来摆脱粗黑线：http: //jsfiddle.net/Qzdme/3/ 但我仍然看到粗白线......

4

2 回答 2

4

检查这个小提琴， http://jsfiddle.net/siyakunde/Qzdme/38/

我已经给了background-size

于 2013-01-09T06:05:28.450 回答
0

重复梯度在最大 % hsl 值和新的 0% 值的开始之间转换时并不智能。您可以尝试逐渐过渡回第一组 hsl 值，例如：

div {
  height: 200px;
  min-width: 900px;         
  background-image:     -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%, hsla(0,0%, 100%,0) 9%),                 
            -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%, hsla(0,0%,  0%,0) 6%),                  
            -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%, hsla(0,0%,100%,0) 4%),
            -webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%, 
                            hsl(0,0%,90%) 47%, 
                            hsl(0,0%,78%) 53%,
                            hsl(0,0%,70%)100%);

}

这是 jsfiddle 版本：http: //jsfiddle.net/Qzdme/35/

放大后，这似乎看起来更平滑一些。祝你好运！

于 2013-01-08T18:01:52.147 回答