div+css实现九宫格效果

div+css实现九宫格效果 有3种方法：
1、方法一：把九宫图切割成9张图，用9个div合在一起，改变宽高，实现。优点：兼容性100%支持，缺点div太多，使用不方便。

2、方法二：把九宫图按特定格式排列成一张图，再用9个div合在一起，改变宽高和padding，实现。优点：兼容性100%支持，缺点div太多，使用不方便。

   
   
一张背景实现自  适应九宫格
   
在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，不过在切图方面会比较严禁有1px的不对称就会出问题，请留意下面例子的切割分析。

   
   

   
  
   

   
   

   

  
   

   

   

     

3、方法三：使用css的border-image属性实现。优点：div只用1个，使用方便，缺点是极少数机型会出现白线的问题。

目前推荐使用这种方法：

-webkit-border-image: url('../assets/button_9slice.png') 18 repeat;
border-image: url('../assets/button_9slice.png') 18 fill repeat;