Css 实现父元素设置 border-radius 时影响子元素圆角

Myth丶恋晨 2022-11-19 07:55 440阅读 0赞

实现效果
在这里插入图片描述
代码

  1. <view class="my-group-page-card-img">
  2.     <image class="portrait-img" src="@/static/img/head portrait.jpg"></image>
  3.     <image class="portrait-img" src="@/static/img/head portrait2.jpg"></image>
  4.     <image class="portrait-img" src="@/static/img/head portrait3.jpg"></image>
  5.     <image class="portrait-img" src="@/static/img/head portrait4.jpg"></image>
  6. </view>
  8. <style scoped> .my-group-page-card-img { 
  9.         width: 92upx;
  10.         height: 92upx;
  11.         font-size: 0;
  12.         border-radius: 17px;
  13.         overflow: hidden;
  14.     }
  15.     .portrait-img { 
  16.         width: 46upx;
  17.         height: 46upx;
  18.     }
  19. </style>

实现关键点在于 overflow: hidden;

发表评论

表情：
评论列表 （有 0 条评论，440人围观）

还没有评论，来说两句吧...

相关阅读