同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容
上图给你们看看

有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。 我同事用css3动画给这些字体价格闪闪旋转的金边
这个好办
父元素使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-webkit-mask-image: -webkit-radial-gradient(white, black);

这两个css属性放到父级就可以了 然后我发现 这个问题百度搜的很少(可能我关键字不对) 找到一个这个还很累赘(代码量太多)
然后我就自己研究了一下 其实用着两句就好了
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
ok 加上就搞定 

不信你试试，我相信你会回来点赞的！！！！

微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素的更多相关文章

  1. 微信小程序css继承

    在微信小程序里写的全局样式,pages里的组件是可以继承的,但是components里只能继承font和color属性.

  2. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  3. border-radius元素overflow:hidden失效问题

    父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...

  4. 微信小程序のCss（一）

    一.margin:外边距:设置对象四边的外延边距. margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上.右.下.左的顺序作用于四边. margin:20r ...

  5. 微信小程序css篇----flex模型

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...

  6. 微信小程序1rpx border ios真机显示不全问题

    无意间测试发现,把border的颜色的透明度颜色改成0.99就可以了.1就不行. 边框显示不全的写法: border:1rpx solid rgba(244,84,80,1); 将边框代码的透明度改成 ...

  7. 微信小程序css画三角形内有文字

    <view class="productStatus"> <span> <em>已上架</em> </span> < ...

  8. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  9. 【微信小程序】开发实战 之 「视图层」WXML & WXSS 全解析

    在<微信小程序开发实战 之 「配置项」与「逻辑层」>中我们详细阐述了小程序开发的程序和页面各配置项与逻辑层的基础知识.下面我们继续解析小程序开发框架中的「视图层」部分.学习完这两篇文章的基 ...

随机推荐

  1. DataTable转换为Entity(反射&&泛型)

    public static IEnumerable<T> Parse<T>(IEnumerable<DataRow> rows) where T : class, ...

  2. jquery 复选框操作-prop()的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. C# WebApi使用AttributeRoutes特性路由

    1.在创建WebApi中默认的路由规则,只能满足一般简单的RESTful风格,如 api/Products/{id}. 但是在实际运用中很难严格满足RESTful要求的WebApi.因此需要使用高版本 ...

  4. RelativeSource 简述

    原文:RelativeSource 简述 RelativeSource实现标记扩展,以描述绑定源相对于绑定目标的位置. <Binding> <Binding.RelativeSour ...

  5. Django 下添加左侧字段显示和搜索

    在对应的apps下建立xadmin.py from .models import EmailVerifyRecord import xadminclass EmailVerifyRecordAdmin ...

  6. PHP获得指定日期所在星期的第一天和最后一天

    function getdays($day){ $lastday=date('Y-m-d',strtotime("$day Sunday")); $firstday=date('Y ...

  7. HBuilder打包App流程记录

    摘要:基于HBuilder建立一个简单的移动app项目,并打包成apk,使用这套平台用H5开发真正的移动项目,相当于省去了原生部分的人力和工作配合,性能的话,后续我会基于这套技术开发相关的应用来验证, ...

  8. layabox pc app web同步发布的工具

    http://layabox.com/ 或者vs + unity3d开发游戏

  9. CLSRSC-400: A system reboot is required to continue installing.

    I try to install oracle database 12c RAC on the RedHat 7.3,when I execute the script '/u01/app/12.2. ...

  10. WebApi实现验证授权Token,WebApi生成文档等 - CSDN博客

    原文:WebApi实现验证授权Token,WebApi生成文档等 - CSDN博客 using System; using System.Linq; using System.Web; using S ...