在一些购衣网站往往可以通过搜索“条纹”关键词搜索到对应的条纹衫。然而条纹衫的下面有一个选择条纹款式的选项,如下图是优衣库的一个选择截图。通过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;
/*由于使用的是线性渐变,他需要两个颜色相互对应,所以都是以一对的形式存在。*/
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。