微信小程序实现IOS上的box-shadow效果

核心：只需要把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上需要注意两点：

1. 加上-webkit-前缀。
2. 单位不要使用rpx，而应该使用px.

关于第二点具体实现有两种方式：

• 内联样式。因为会自动转。
  官方说，style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。所以【不建议】。
• 直接使用px单位。而且不要让值<1。也就是不要使用0.5px这种的。

写法举例

内联样式写法举例：

内联样式写法举例：
电话联系车主

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作为单位

至此，各种阴影效果在小程序上在各种手机端都可以实现了。