解决overflow+border-radius+transform圆角问题

原创
2020/02/19 00:23
阅读数 1.5K

网上还有其他版本,但是对我来说都不好使,下面是我在Chrome上的代码。overflow:hidden依然是不能正常使用,换成unset就可以,读者如果有更好的解决方案,请留言,谢谢。

<figure>
   <img :src="item.photo" :alt="item.title">
 </figure>
figure {
  border-radius: 10px;
  background: #2f3238;
  /*overflow: hidden;*/
  overflow: unset;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ 
 /* this fixes the overflow:hidden in Chrome */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

figure img {
  display: block;
  transition: opacity 1s, transform 1s;
}

figure:hover img {
  opacity: 0.8;
  transform: scale3d(1.1,1.1,1);
}
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部