html - 如何在 Ionic 4 中将边界半径添加到 ion-img

Question

我需要将 border-radius 添加到 ion-img 但似乎 shadow DOM 不允许我修改。

HTML

<ion-img [src]="img-url" [alt]="alt"></ion-img>

CSS

ion-img  {
    border-radius: 10px !important;
}

Answer 1

正确的、不明显的方法是使用 CSS shadow parts .

在这种情况下 ion-img has a shadow part image所以我们的 SCSS 看起来像:

ion-img::part(image) {
  border-radius: 10px;
}

是的，该部分没有引号，是完整的单词“image”(不是“img”，我们需要部分名称，而不是目标标签名称)。