微信小程序开发微信小程序vue+js+react

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

2018-07-11  本文已影响54人  王月_92f2

核心:只需要把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.

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

写法举例

内联样式写法举例:

内联样式写法举例:
<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作为单位

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

上一篇下一篇

猜你喜欢

热点阅读