如何制作具有border-radius的平滑线性渐变条纹

时间:2014-03-10 14:12:05

标签: css3

我正在尝试使用线性渐变创建条纹,但无法获得角度组合以产生没有斑点的平滑效果。

目前的代码是

.circle {


background: linear-gradient(-45deg, rgba(255,255,255, 1) 25%, transparent 25%, transparent 50%, rgba(255,255,255, 1) 50%, rgba(255,255,255, 1) 75%, transparent 2%, transparent);
    background-size:40px 40px ;
    width:300px;
    height:300px;
    border-radius:150px;
-moz-background-clip: padding;  
background-clip: padding-box; 
-webkit-background-clip: padding-box;
}


http://jsbin.com/fohayaxa/1/edit

1 个答案:

答案 0 :(得分:0)

效果看起来很干净,我看到光滑的斜线。 this网站上有类似的模式可以实现您正在寻找的(或已经完成的)。