核心：只需要把box-shadow的单位改成 px 。而不要使用rpx就可以。
想要实现阴影效果：
image.png
css属性选择：box-shadow属性。
属性for查寻
语法：box-shadow: h-shadow v-shadow blur spread color inset;
前四个按照位置来决定值各自代表的含义。后两个就可以直接写，因为太过明显，浏览器可以识别。
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
inset：可选。将外部阴影 (outset) 改为内部阴影。默认的是外部阴影。所以如果是outset那么就可以直接省略。如果是内阴影再写上inset.
兼容
安卓下，只需要写上box-shadow:0 3rpx 5rpx 1rpx #ffb12a99;就可以实现。
然而IOS上需要注意两点：
- 加上
-webkit-前缀。 - 单位不要使用
rpx，而应该使用px.
关于第二点具体实现有两种方式：
- 内联样式。因为会自动转。
官方说，style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。所以【不建议】。 - 直接使用
px单位。而且不要让值<1。也就是不要使用0.5px这种的。
写法举例
内联样式写法举例：
内联样式写法举例：
<view class="phoneBtn" style="box-shadow:0px 3px 5px 1px #ffb12a99;">电话联系车主</view>
css文件写法举例：
.class{
box-shadow:0 6rpx 10rpx 2rpx #ffb12a99;/*for Android*/
-webkit-box-shadow:0px 3px 5px 1px #ffb12a99;/*for IOS*/
}
颜色的写法可以8位的，后边的两位是透明度。有一点比较奇怪：这种写法后两位是透明度。如果用rgba表示那么 "rgba(255, 177, 42, 0.6)"。相当于是把这个顺序的四个值转换成了16进制的而已。99/255=0.6
不过呢，pxcook的顺序可不是这样的，他的做法跟网上对<#ffffffff>的解释一样，前两位是透明度。
<#ffffffff>的解释
from色值的透明度与十六进制代码转换：
#ffffffff由#加八位数字或字母组成，前两个ff为透明度（十六进制），后面六位ffffff为颜色代码，采用RGB配色（十六进制）
附：text-shadow也是不能在IOS使用rpx作为单位
至此，各种阴影效果在小程序上在各种手机端都可以实现了。
