一、条纹背景

利用background为linear-gradient函数实现，linear-gradient取值如下：

示例代码(斜角条纹)：

background: linear-gradient( 40deg, #fb3 5px, #58a 15px); width: 200px; height: 100px; margin: 0px auto; background-size: 30px 30px;

当linear-gradient添加多组值的时候，前面的值会覆盖后面的，如下代码：

background-image:linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0)

说明:linear-gradient(45deg, transparent 75%, #bbb 0)的信息会被linear-gradient(45deg, #bbb 25%, transparent 0) 覆盖。

示例代码：

width: 200px; height: 200px; background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px; background-size: 25px 25px;

代码解释:

* image与position一对一的相互参照；image实现图形，position实现定位 * 每个图形都是一个小的三角形，两个三角形相互拼接成一个正方形，然后近一步定位即可。 * 注意角度的旋转，他是顺时针的。

linear-gradient还可以合并写法，也就是定义一个角度，后面跟随多组颜色值

linear-gradient(45deg, #bbb 25%, transparent 0, \transparent 50%, #bbb 0, transparent 75%, #bbb 0)

css可以用\（反斜杠）进行换行，如上

不规则条纹

.wrap{ width: 600px; height: 100px; background: hsl(20, 40%, 90%); background-image: linear-gradient(90deg,#fb3 10px, transparent 0), linear-gradient(90deg,#ab4 20px, transparent 0), linear-gradient(90deg,#655 30px, transparent 0); background-size: 40px 100%, 60px 100%, 80px 100%; } .wrap-thr{ margin-top: 5px; width: 600px; height: 100px; background: hsl(20, 40%, 90%); background-image: linear-gradient(90deg,#fb3 10px, transparent 0); background-size: 40px 100%; } .wrap-one{ margin-top: 5px; width: 600px; height: 100px; background: hsl(20, 40%, 90%); background-image:linear-gradient(90deg,#ab4 20px, transparent 0); background-size: 60px 100%; } .wrap-two{ margin-top: 5px; width: 600px; height: 100px; background: hsl(20, 40%, 90%); background-image:linear-gradient(90deg,#655 30px, transparent 0); background-size: 80px 100%; }

复杂边框背景

方案一 利用border-image实现，border-image使用的是九宫格伸缩法

方案二 利用背景多层覆盖原理实现，先实现多层有颜色的背景，最后加上一层白色的。

.wrap{ width: 200px; height: 50px; padding: 1em; border: 1em solid transparent; background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,red 0, red 12.5%, \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em; } .wrap-one{ margin-top: 5px; width: 200px; height: 50px; padding: 1em; border: 1em solid transparent; background: repeating-linear-gradient(-45deg, \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em; } .wrap-two{ margin-top: 5px; width: 200px; height: 50px; padding: 1em; border: 1em solid transparent; background: repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em; } .wrap-thr{ margin-top: 5px; width: 200px; height: 50px; padding: 1em; border: 1em solid transparent; background: repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em; }