1、背景图片

废话不多说，上代码：

<div id="div1">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
   <div class="div4"></div>
   <div class="div5"></div>
   <div class="div6"></div>
</div>
<style>
   #div1 div{
      float:left;
      width: 200px;
      height:200px; 
      margin-right:10px;
      margin-bottom:10px;
      border:5px dashed #000;
      padding:10px;
      background:#eee url(../fd.png) no-repeat;
      box-sizing: border-box;
   }
   #div1 .div1{
      background-origin:border-box;
   }
   #div1 .div2{
      background-origin:content-box;
   }
   #div1 .div3{
      background-origin:padding-box;
   }
   #div1 .div4{
      clear: left;
      background-clip:border-box;
   }
   #div1 .div5{
      background-clip:content-box;
   }
   #div1 .div6{
      background-clip:padding-box;
   }
   #div1:after{
      content: '';
      display: table;
      clear:both;
   }
</style>

效果图如下：

背景位置

投影：
box-shadow: X坐标/ Y坐标/ 模糊/ 扩展/ 颜色/ 内阴影
背景初始位置：
background-origin:border-box content-box padding-box(默认);
背景裁剪：
background-clip:border-box(默认) content-box padding-box;

2、条纹效果 -> 线性渐变

<div id="div3"></div>
<style>
   #div3{
      width: 200px;
      height:200px;
      background:linear-gradient(45deg,
      #fb3 25%,#58a 0,#58a 50%,
      #fb3 0,#fb3 75%,#58a 0);
      background-size:42px 42px;
   }
</style>

条纹一

3、条纹效果 -> 线性渐变

<div id="div4"></div>
<style>
   #div4{
      width: 200px;
      height:200px;
      background:repeating-linear-gradient(45deg,
      #fb3,#fb3 15px,#58a 0,#58a 30px);
   }
</style>

条纹二

4、条纹效果 -> 同色系

<div id="div5"></div>
<style>
   #div5{
      width: 200px;
      height:200px;
      background:#58a;
      background-image:repeating-linear-gradient(30deg,
      hsla(0,0%,100%,.1),
      hsla(0,0%,100%,.1) 15px,
      transparent 0,
      transparent 30px);
   }
</style>

同色系

5、条纹效果 -> 交错斜纹

<div id="div6"></div>
<style>
   #div6{
      width: 200px;
      height:200px;
      background:#58a;
      background-image:repeating-linear-gradient(45deg,
      hsla(0,0%,100%,.1),
      hsla(0,0%,100%,.1) 15px,
      transparent 0,
      transparent 30px),
      repeating-linear-gradient(-45deg,
      hsla(0,0%,100%,.1),
      hsla(0,0%,100%,.1) 15px,
      transparent 0,
      transparent 30px);
   }
</style>

斜纹

6、条纹效果 -> 辅助线(简单)

<div id="div7"></div>
<style>
   #div7{
      width: 200px;
      height:200px;
      background:#58a;
      background-image:
         linear-gradient(#aaa 1px,transparent 0),
         linear-gradient(90deg,#aaa 1px,transparent 0);
      background-size:30px 30px;
   }
</style>

辅助线1

7、条纹效果 -> 辅助线(逼真)

<div id="div8"></div>
<style>
   #div8{
      width: 200px;
      height:200px;
      background:#58a;
      background-image:
         linear-gradient(white 1px,transparent 0),
         linear-gradient(90deg,white 1px,transparent 0),
         linear-gradient(hsla(0,0%,100%,.3)1px,
         transparent 0),
         linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,
         transparent 0);
      background-size: 75px 75px,75px 75px,
      15px 15px,15px 15px;
   }
</style>

辅助线2

8、点阵图

<div id="div9"></div>
<style>
   #div9{
      width: 200px;
      height:200px;
      background:#58a;
      background-image:
         linear-gradient(#58a 14px,transparent 0),
         linear-gradient(90deg,white 1px,transparent 0);
      background-size:15px 15px,15px 15px;
   }
</style>

点阵

9、圆点

<div id="div10"></div>
<style>
   #div10{
      width: 200px;
      height:200px;
      background: #655;
      background-image:
         radial-gradient(tan 30%, transparent 0),
         radial-gradient(tan 30%, transparent 0);
      background-size: 30px 30px;
      background-position:0 0 ,15px 15px;
   }
</style>

圆点

10、条纹效果 -> 棋盘

<div id="div11"></div>
<style> 
  #div11{
      width: 210px;
      height:210px;
      background: #888;
      background-image:
         linear-gradient(hsla(0,0%,80%,1) 50%, transparent 0),
         linear-gradient(90deg,hsla(0,0%,80%,1) 50%, transparent 0);
      background-size: 20px 20px;
      background-position:0 0 ,0 0;
   }
</style>

棋盘

11、点阵图<

div id="div12"></div>
<style>
   #div12{
      width: 210px;
      height:210px;
      background:#eee;
      background-image:
         linear-gradient(45deg,
         rgba(0,0,0,.25)25%,transparent 0,
         transparent 75%,rgba(0,0,0,.25)0),
         linear-gradient(45deg,
         rgba(0,0,0,.25)25%,transparent 0,
         transparent 75%,rgba(0,0,0,.25)0);
      background-position:0 0,15px 15px;
      background-size: 30px 30px
   }
</style>

棋盘

12、条纹效果 -> 随机纹理

<div id="div13"></div>
<style>
   #div13{
      width: 210px;
      height:210px;
      background:hsl(20,40%,90%);
      background-image:
         linear-gradient(90deg,#fb3 2px,transparent 0),
         linear-gradient(90deg,#fb3 11px,transparent 0),
         linear-gradient(90deg,#ab4 23px,transparent 0),
         linear-gradient(90deg,#655 41px, transparent 0);
      background-size:23px 100%,41px 100%,61px 100%,83px 100%;
   }
</style>

随机条纹

备注：这里的大多数例子，都是从LEA VEROU的《css揭秘》这本书上借鉴来的，感兴趣的童鞋不如去买这本书，简直是CSS神书，就和Js的蝴蝶一样，前段必备。