简简单单的滚动条样式

制作简易滚动条样式的思路

1.实现技术：css3中的background-image:linear-gradient(),即线性渐变。

2.实现思路：滚动条样式明显是存在重复的，所以只需要做出局部的样式，重复即可。

第一种方法：

/*css*/
.progress{
      width: 400px;
      height: 16px;
      background-color: #55c22a;
      border-radius: 5px;
      background-image: linear-gradient(45deg,transparent 33%,rgba(255,255,255,.5) 33%,rgba(255,255,255,.5) 67%,transparent 67%);
      background-size: 31px 16px;
    }
<!--html-->
<div class="progress"></div>

效果图如下： 利用线性渐变做出一小段的样式后，使其平铺，达到想要的效果。

第二种方法

/*css*/
.progress{
      width: 400px;
      height: 16px;
      background-color: #55c22a;
      border-radius: 5px;
      background-image: repeating-linear-gradient(45deg,transparent,transparent 4%,rgba(255,255,255,.5) 4%,rgba(255,255,255,.5) 8%);
    }
<!--html-->
<div class="progress"></div>

效果图如下：

使用线性渐变属性的repeating-linear-gradient值，按照百分比重复词样式直到铺满宽度