如何在Material UI中实现图片图标边角的圆弧效果？

解决方案 #

你只需按照以下步骤调整对应样式即可实现预期效果：

1. 给外层Card对应的tabCard类添加如下配置，保证卡片圆角效果同时不会裁切突出的头像：

tabCard: {
  borderRadius: 12, /* 可根据视觉需求自行调整圆角数值 */
  overflow: "visible",
  position: "relative"
}

2. 修改media类样式，给媒体区域单独设置顶部圆角：

media: {
  height: 160,
  backgroundColor: "Red",
  overflow: "visible",
  borderTopLeftRadius: 12, /* 和卡片圆角数值保持一致即可 */
  borderTopRightRadius: 12
}

3. 给cardHeader类添加相对定位，让内部绝对定位的头像以它为基准偏移，同时调整头像的定位参数，让它刚好跨在媒体区和卡片头部的交界处：

cardHeader: {
  position: "relative",
  paddingTop: 26 /* 给突出的头像预留足够顶部空间，可自行调整数值 */
}
small: {
  width: muiTheme.spacing(3),
  height: muiTheme.spacing(3),
  position: "absolute",
  bottom: 28, /* 调整该值控制头像上下位置，刚好露出一半在媒体区即可 */
  left: 16, /* 调整该值控制头像左右位置，和下方文本对齐 */
  border: "3px solid white",
  borderRadius: "50%"
}

内容的提问来源于stack exchange，提问作者Aamir