background绘制时是从“linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753”绘制到...头部的“linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0)”渐变样式。所以这“点”要注意了。

■Ⅱ.每一个使用“linear-gradient”绘制出来的渐变效果，都可以看作是一张背景图。因为，这个可以在“background-size”里设置（每个背景图的大小用逗号“,”区分）。

■Ⅲ.【非常重要】，制作复杂的背景图并不难，但是你得知道“background-repeat”的原理就是每一张背景图都按照你设定的“属性”去绘制。如果你不知道这个原理，甚至没注意到。那么当你第一次看到这么漂亮的背景效果，想自己动手丰衣足食的时候却发现，“What is this？”，看看我第一次写的背景效果。

第一次写的：

理想样子：

实际样式：

linear-gradient(to right, transparent 0%, #F00 0%, #F00 100%, transparent 100%) 25px 25px, 9 linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%), 10 linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),

效果图：

 ⊙︿⊙ 好桑心，怎么整个网页红色的？

其实这其中就是”，所以当“background-size”不是一致的时候，复制绘制的位置也是不一样的。

知道是这个原因了，改动一下。

正确的样式：

linear-gradient(135deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%) 25px 25px, 9 linear-gradient(315deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%), 10 linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%), 11 linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),

效果图：

知道原理才是硬道理 ╰(￣▽￣)╮