CSS边框图片属性border-image

今天学了边框图片，说实话听的是一脸懵逼，个人比较纠结于“大局”，所以一直卡在角和边的设定上，后来经过自己实际测试，得出了一些心得。

基本写法：border-image:url(xxx.jpg) 50/20px round;

url就是调用一张素材图片

50是一个没有写单位的数字，意思是裁剪出素材图片中的对应大小，比如这张图有500px的宽度，我们只要其中左边的50，那么我们就写50就好了，如果你要单独设置四个角，那就要都分开写，会很麻烦，就不说了，自己看字典把！

20px就是边框需要展示出来的图片宽度，比如我只要你的边框图片显示50px，那就写50px，而且边框的图片和背景的效果有些相同，他是不会把内容部分给挤下去的。

round是边框除去四个角后剩下的部分图片的排列方式，round是根据边框剩余的大小，自动调整图片尺寸，直到填满为止。

根据以上，我们简单点来说就是，先设置边框的四个角，再来设置剩下的边，这么一说其实就很容易理解的，而更深入的不过是一些灵活性的设置和没卵用的功能，感觉边框图片我平时碰到的比较少，毕竟你想想，如果是多个平台设备访问同一个网页，电脑端可能没啥问题，但是手机端呢，你的边框不就会自动变小吗，那么边框的图片也会有一定的变形，说不定手机端还不支持呢，那有人会说，我们可以设置简单的图案啊，简单的图案，那我们放着border中的边框样式不用，留着吃灰啊，而且一些高级效果，内外发光，我们完全可以通过box-shadow的阴影属性来达到要求，而且边框图片会根据你素材会有一定的间隙，你想要让边框图片大一点，就只能调整边框图片的宽度或者去修改素材的大小，感觉上不是很好用，不知道是我暂时还没遇到还是怎么样。