border-image图片边框

Posted 2022-05-24 diyichen

一、border-image的兼容性

       1、支持到IE11以上，其他主要浏览器均支持

       2、使用webkit以后支持android4.3以上

二、border-image的参数（包括图片、裁剪位置、重复性）

       1、图片（border-image-source）采用url（）调用，可以是相对/绝对路径                          

       2、图片的裁剪位置（border-image-slice）                                                                                

            1>参数没有单位，专指像素。border-image：url（a.png）27 repeat;   这里27指27px                                                                                                                      

             2>支持百分比，百分比大小相对于边框图片而言                                                                

             3>裁剪特性，效果的实现上类似于九宫格裁剪，有1~4个参数，方位符合CSS普遍的方位规则（上右下左，顺时针）                                                                                              

               border-image：url（border.png）30 %  35% 40%  30%  repeat;     

              在图片上部30%的地方裁剪一下，在右部35%的地方裁剪一下，在底部40%的地方裁剪一下，在左部30%的地方裁剪一下。形成了九个分离区域——九宫格

        3、重复性（border-image-repeat）参数0~2个，2个参数一个水平，一个垂直

            这里重复与background的背景重复，差异较大。background图片的重复包括：重复、不重复、水平重复、垂直重复。对于border-image而言包括：repeat（重复）、round（平铺）、stretch（拉伸），其中stretch是默认值。

三、应用

        1、 使用时注意需要border-style存在，单单设置border-image是不会生效的