背景:
项目前端采用的 iview 框架+typescript,图片预览本身打算采用 v-viewer 插件,因为项目框架原因安装后报错,所以放弃了,改用 element-ui 的 Image 组件来实现预览功能。
实现:
按需引入了 element-ui 组件。
问题:
在360、火狐浏览器没啥问题,在 chrome 浏览器发现,预览的时候,按钮的圆角没有效果,如下图所示:
解决方案:
用一个图片来遮挡:
{
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
overflow: hidden;
}
问题就解决啦。
参考:关于chrome浏览器设置了display:flex之后border-radius属性不生效的问题解决方法