css3 制作条纹背景

最近，设计出了带浮雕效果的按钮，然后需要用到制作条纹背景。

原来做的背景一般是渐变的，没有这种psd里面的浮雕效果。

要做的是中间的这个绿色的带浮雕的按钮

页面是响应式的，所以要求浮雕效果根据页面的尺寸的变化还是一样的。

源代码：

.home_turnslia.a_pop{

    display : block ;

    font-size : 2.2 rem;

    color : rgba ( 255 , 255 , 255 , .8 ) ;

    padding : 1.2 rem 1rem;

    background : -moz-linear-gradient ( top , #95dc3c 50 % , #5cb225 50 % ) ;

    background : -webkit-linear-gradient ( top , #95dc3c 50 % , #5cb225 50 % ) ;

    background : -o-linear-gradient ( top , #95dc3c 50 % , #5cb225 50 % ) ;

    background-size : 100 %  5 0 % ;

    text-shadow : -1 px 0 px 0 #95c97a , 1 px 1 px 0 transparent , 1 px 1 px 0 #95c97a ;

    border : 1 px solid #c7dfa5 ;

    border-radius : .4rem ;

    box-shadow : -2 px 0 5 px #c7dfa5 , 0 -2 px 5 px #c7dfa5 , 0 2 px 5 px #c7dfa5 , 2 px 0 5 px #c7dfa5 ;

    letter-spacing : 2 px ;

}

这是我原来做写的，由于页面的拉伸,条纹效果就变成了不是从中间开始隔断了。

然后改良成立这样的：

.home_turns li a .a_pop {

      display : block ;

      font-size : 2.2 rem;

    color : rgba ( 255 , 255 , 255 , .8 ) ;

    padding : 1.2 rem 1rem;

    background : -moz-linear-gradient ( top , #95dc3c 50 % , #5cb225 50 % ) ;

    background : -webkit-linear-gradient ( top , #95dc3c 50 % , #5cb225 50 % ) ;

    background : -o-linear-gradient ( top , #95dc3c 50 % , #5cb225 50 % ) ;

    background-size:100%100%;

    text-shadow : -1 px 0 px 0 #95c97a , 1 px 1 px 0 transparent , 1 px 1 px 0 #95c97a ;

    border : 1 px solid #c7dfa5 ;

    border-radius : .4rem ;

    box-shadow : -2 px 0 5 px #c7dfa5 , 0 -2 px 5 px #c7dfa5 , 0 2 px 5 px #c7dfa5 , 2 px 0 5 px #c7dfa5 ;

    letter-spacing : 2 px ;

}

将background-size中的第二个值改为100%。再测试就无误了。

本来做渐变的时候我一般参考的是这个网址

http://www.w3cplus.com/content/css3-gradient

虽然我很想可以直接写 出来但是每次都忘了，要不就是直接从原来网页的样式扣过来，要不就是直接在打开这个网页拿代码改色值。

虽然这样很不好，暂时我也觉得，记不住。

可能原来没有遇到过这种需求吧，我也以为背景里面没有制作这种条纹的功能。

这个网页的下部有制作这种条纹的样式

既然有这种，那么中间断开的也应该有吧。

然后直接查找了css 条纹背景

http://www.w3cplus.com/css3/css-secrets/striped-backgrounds.html

在这个地址发现了需要的样式。。。。

好吧，没看完我就直接拿了下来，后面的还用不到。

参考

background: linear-gradient(#fb3 50%, #58a 50%);

background: linear-gradient(#fb3 50%, #58a 50%);

background-size: 100% 30px;

代码是在这段的基础上改的，以后有类似的可以直接用。