边框/背景

边框图片：

例如：border-image:url("") 27/20px round;

• 参数1：边框图片的路径
• border-image-source
• 参数2：切割的尺寸，切了四刀，顺序为：上右下左，单位是px，默认，所以不用带单位
• border-image-slice

border-image-jugongtu.png

• 参数3：边框的宽度，因为此例子是20，所以那27自适应显示在边框中
• border-image-width
• 参数4：平铺的方式：repeat(平铺)--可能会把图标损坏，他是从中间向两边平铺，不会保证图标的完整性 round（环绕）--会按照整数的个数来排列，不会把这个图标损坏（肯定会自己自适应） stretch(拉伸)--把切割的九宫格当中的边对应的图标拉伸

• border-image-repeat

  
  
  

  border-image-jugongtu-2.png
  
  
  

  border-image-repeat-round.png

20161103205629.jpg

* 此案例只是想保证右上角的完整性，所以左上角和右下角变形时正常的，因为3636，右面有一点空白，索引把它变成正方形，肯定会变形的 **

最大的好处就是自适应，但是有可能存在兼容问题，但是高版本的没有问题

背景

• 例如background-size:cover;
• 它能让我们的背景铺满整个盒子，不管有没有裁剪掉，简言之：按比例缩放，铺满整个盒子，如果有裁剪的，还想让盒子居中显示在盒子中background-position:center,center;
• 例如background-size:contain;
• 它能让背景图片完全显示在盒子中，但是有可能铺不满哦！简言之：按比例缩放，全部显示在盒子中

这两个属性是动态的，而且都是按比例缩放的

feng.jpg

这个本来是高度不够的，但是用了background-size:cover，它就能铺满了，background-position:center center;

背景原点/背景裁剪

• 背景原点：
• 背景的平铺从内边距开始backgrond-origin:padding-box;(默认)
• 背景的平铺从边框开始background-origin:border-box;
• 背景的平铺从内容开始background-origin:content-box;
• 背景裁剪：
• background-clip:border-box;（默认属性）
  *除了内边距，其他部分都要被裁剪（往外） background-clip:padding-box;
  *裁剪的区域，内容以外的区域都要被裁剪掉 background-clip:content-box;

**这两个属性的出现：是为了京东的移动站

2.jpg

例如：上面的这个图
**

多背景