如何在 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

HTML

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

CSS

.your-img {
    border-radius: 10px !important;
    overflow: hidden;
}

Answer 2

正确的、非显而易见的方法是使用CSS 阴影部分。

在这种情况下ion-img 有一个阴影部分，image所以我们的 SCSS 看起来像：

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

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

Answer 3

用 Shadow DOM 封装样式很棘手，但是有一些方法。

在这种情况下，内联样式属性对您有用吗？

<ion-img [src]="img-url" [alt]="alt" [style]="border-radius: 10px;"></ion-img>

否则，您可以尝试<style></style>向 Shadow DOM 的内部 HTML 添加一个带有边框半径的标签。

所附链接的修改示例：

<ion-img [src]="img-url" [alt]="alt" [style]="border-radius: 10px;"></ion-img>