css3 制作条纹背景

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

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

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

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

源代码：

.home_turnslia.a_pop{

   display:block;

   font-size:2.2rem;

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

   padding:1.2rem 1rem;

   background: -moz-linear-gradient(top,#95dc3c50%,#5cb22550%);

   background: -webkit-linear-gradient(top,#95dc3c50%,#5cb22550%);

   background: -o-linear-gradient(top,#95dc3c50%,#5cb22550%);

   background-size:100% 50%;

   text-shadow:-1px0px0#95c97a,1px1px0transparent,1px1px0#95c97a;

   border:1pxsolid#c7dfa5;

   border-radius:.4rem;

   box-shadow:-2px05px#c7dfa5,0-2px5px#c7dfa5,02px5px#c7dfa5,2px05px#c7dfa5;

   letter-spacing:2px;

}

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

然后改良成立这样的：

.home_turnslia.a_pop{

     display:block;

     font-size:2.2rem;

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

   padding:1.2rem 1rem;

   background: -moz-linear-gradient(top,#95dc3c50%,#5cb22550%);

   background: -webkit-linear-gradient(top,#95dc3c50%,#5cb22550%);

   background: -o-linear-gradient(top,#95dc3c50%,#5cb22550%);

   background-size:100%100%;

   text-shadow:-1px0px0#95c97a,1px1px0transparent,1px1px0#95c97a;

   border:1pxsolid#c7dfa5;

   border-radius:.4rem;

   box-shadow:-2px05px#c7dfa5,0-2px5px#c7dfa5,02px5px#c7dfa5,2px05px#c7dfa5;

   letter-spacing:2px;

}

将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;

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