小程序中border- image的使用及ios兼容

border-image的基本使用

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

如果省略值，会设置其默认值。
默认值 none 100% 1 0 stretch

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

需求背景

要求做一个这样的边框

想法1：自己用css画，外面的线直接border就行，里面的线也用border，然后用四个定位盖住凸出来的部分。但是这样代码量比较大，而且定位万一出了问题就不好看。

想法2: 切图做背景，但是考虑到文案是活动的，背景图的大小不好控制。

此时此刻，想到了 border-image

一开始使用的时候，直接使用了
border-image:url(border.png) 27 round；
但是发现没有什么卵用，以为是小程序不支持，误打误撞下，发现使用这个的前提是先设置

border：1px solid transparent;
就是指先有border，才有border的背景设置。

于是很开心的，使用了，之后发现。

ios并没有什么卵用，一片空白，彷佛没有来过

网上找了一个神奇的网友，说是要把border拆开来写
将border:1px solid transparent;
===>
border-style:solid;
border-width:1px;
border-image:url(…) 30 30 round;

大功告成，真的可以出现了。