在一些购衣网站往往能够通过搜寻“条纹”关键词搜寻到对应的条纹衫。然而条纹衫的上面有一个抉择条纹样式的选项,如下图是优衣库的一个抉择截图。通过F12能够看到他们的前端人员是间接粘一张图片下来。然而我集体感觉业余的前端开发工程师能不必图片就不要用,因为一来会减少http申请去申请资源,造成些许性能影响,另一方面万一资源服务器宕机了,会造成资源失落的景象,对用户体验不好。

那么如何实现一个条纹状的DIV呢。可能很多人感觉要依赖于

<div>    <div class="pink"></div>    <div class="grey"></div>    <div class="pink"></div></div>

然而事实上不须要嵌套 只用一个div就行了。

html:<div class="stripe"></div>
.stripe{    width:400px;    height:180px;    background:linear-gradient(#cf6152 50%,#e9e1ea 0%);    background-size:100% 60px;    /*因为应用的是线性突变,他须要两个色彩互相对应,所以都是以一对的模式存在。*/}