案例代码如下：
<view style="width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden"> <image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/> </view><view style="width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden;filter:brightness(0.88)"> <image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/></view> |
下边的view只是比上边的多了个filter属性，导致下边view的overflow属性失效，下边是效果对比图：
方向是利用一些插件实现类似的效果，抛弃使用filter属性（如果你坚持要在手机上实现该效果的话） 小白因为滤镜效果可有可无，所以直接将滤镜效果删除，让overflow:hidden生效。附笔者本身要实现的效果：圆形图片加模糊效果。
这个锅。。怎么说呢。。我记得是 chromium 的bug。。。别用在一层。。
chrome里显示是没问题的
border-radius失效，不是overflow失效吧
是父层的overflow失效，border-radius是被遮挡了，调下图片大小就看到了
<view style="width:100px;height:100px;background:yellow;border:1px solid red;overflow:hidden">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/>
</view>
<view style="width:100px;height:100px;background:yellow;border:1px solid red;overflow:hidden;filter:brightness(0.88)">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/>
</view>
你试试呢，overflow没失效啊
就是超出border-raidus部分没有隐藏起来，这个一看你就明白了~
<view style="width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:200px;height:200px;"/>
</view>
<view style="width:200px;height:200px;background:yellow;border:1px solid red;border-radius:100px;overflow:hidden;filter:brightness(0.88)">
<image src="//file2.ih5.cn/v35/files/4365223bd2a03ce8ba2fd5f5f7e9407d_46504_500_500.jpg" style="width:100px;height:100px;"/>
</view>
（另外吐槽下 ： 小程序的picker显示隐藏没有做成属性，却做成了容器····不方便）