android原生相机 上画框 原相机边框素材

border-image 是一个简写属性，分别设定了以下几个属性。

1. border-image-source      指定边框所需素材的路径
                                          注意的是，如果只设置了border-image-source属性而其他属性使用缺省值，则边框素材不会被划分九宫格
                                          而是将整个素材按照边框宽度缩放至合适尺寸后安放在边框四角。
   
   
      
    
   
   
3. border-image-slice   设置边框素材的切割尺寸
   如下图，依次是上横切割线，右竖切割线，下横切割线，左竖切割线。数值分别代表从上、右、下、左边缘向素材中心延伸的像素/百分比数
   注意：切割的数值只接受像素和百分比两个单位，并且像素单位必须省略，即只接收数值或者百分比的形式。例如，border-image-slice: 10 10 30 10代表图片素材按照下图的样式被切割：



4.  
    
    
    
5. border-image-width     设置边框素材的宽度,
7. border-image-outset
   border-image-outset属性会产生使 border-image 相对于原始位置向外侧推移的效果，设置border-image-outset属性会使 border-image 溢出，但不会影响整个盒模型的尺寸，因此在设置此属性时要特别注意防止元素间的相互干扰。



8.  
    
    
    
9. border-image-repeat

border-image-repeat属性用来设置上下左右四边(即2、4、5、7四个素材块)的重复形式，分别有stretch repeat round space四个取值

1. stretch:指定用拉伸方式来填充边框背景图。
2. repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
3. round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
4. space:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

 border-image是css3属性所以存在兼容性问题，需要在属性前面设置-webkit等

---

 

---

 

---

 

border-image 属性是用来给元素边框添加背景图像，
border-image有六大属性值，分别是：图片地址 border-image-source 、
                                                       图片切片 border-image-slice 、
                                                       图片宽度 border-image-width 、
                                                       图片外凸 border-image-outset 、
                                                       图片重复 border-image-repeat

border-image 的作用是代替border-style 值的，假如border-image:none  那背景图将不会被显示，同时将会显示border-style的值

---

 

图片地址 border-image-source

指定边框所需素材的路径
注意的是，如果只设置了border-image-source属性而其他属性使用缺省值，则边框素材不会被划分九宫格    而是将整个素材按照边框宽度缩放至合适尺寸后安放在边框四角。

.border_image{
    border:15px solid #ccc;
     border-image-source: url("./img/border2.jpg"); 
    }