微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
2023-02-18 16:28:14 时间
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容 上图给你们看看
有没有看出来 其实就是父级设置圆角属性失效 父元素使用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 加上就搞定 如下图
相关文章
- [android] 手机卫士黑名单功能(短信拦截)
- [android] 手机卫士黑名单功能(ListView结合SQLite增删改)
- [android] 手机卫士黑名单功能(ListView优化)
- [android] 手机卫士黑名单功能(列表展示)
- [android] 手机卫士自定义吐司
- [android] 手机卫士接收打电话广播显示号码归属地
- [android] 手机卫士来电显示号码归属地
- [android] 切换按钮-自定义控件-拖动效果
- [android] 切换按钮-自定义控件
- [android] 轮播图-无限循环
- [android] 轮播图-滑动图片标题焦点
- [android] 优酷环形菜单-旋转动画
- [android] 优酷环形菜单-相对布局练习
- [android] WebView自定义浏览器
- [android] ndk环境的搭建
- [android] 看博客学习hashCode()和equals()
- [android] 看博客学习Android常见的几种RuntimeException
- [android] 新闻客户端实现左侧导航点击切换
- [android] 新闻客户端引入SlidingMenu
- [android] 手机卫士输入框抖动和手机震动