微信小程序实现IOS上的box-shadow效果
2018-07-11 本文已影响54人
王月_92f2
核心:只需要把box-shadow的单位改成 px 。而不要使用rpx就可以。
想要实现阴影效果:
image.pngcss属性选择: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作为单位
至此,各种阴影效果在小程序上在各种手机端都可以实现了。