ionic4: ion-item border-top-left-radius, -top-right, -bottom-left, -bottom-right

Question

所以，我一直在用 Ionic v4 做一个项目，现在我似乎无法让边界半径工作，因为我正在使用类来检测 ngFor 是否是第一个项或最后一项。

如果它是第一项，它应该只更改 top-left 和 top-right 边框半径。如果它是最后一项，它应该只改变 bottom-left 和 bottom-right 边界半径。

问题是：因为它适用于 Shadow DOM 我无法应用 CSS。

我所做的是：

在我的component.scss

:host {
  ion-item {
    &.first {
      --border-radius: 12px;
      //   --border-top-left-radius: 12px;
      //   --border-top-left-radius: 12px;
      //   border-top-left-radius: 12px;
      //   border-top-left-radius: 12px;
    }
  }
}

但这不是我想要的，评论的CSS是行不通的。根据文档，唯一可以更改 Shadow DOM 样式的变量是 4 border-radius：ion-item Ionic Documentation.

我也试过将 style 硬核化到元素中，但它不起作用。

如果有人能对此有所启发，我将不胜感激。

感谢您的宝贵时间！

Answer 1

border-radius 属性最多需要 4 个不同的值。

值按此顺序描述 - 第一个值适用于 top-left 个角，第二个值适用于 top-right 个角，第三个值适用于 bottom-right 个角，第四个值适用到 bottom-left 角。

#example {
  border-radius: 50px 20px 30px 10px;
}

You can get more information on the border radius property here

此外，我认为您没有正确选择first-child

在嵌套的 SCSS 文件中，您宁愿键入：

&:first-child {
    border-radius: 12px 12px 0 0;
  }

Check this on JSFiddle

ionic4: ion-item border-top-left-radius, -top-right, -bottom-left, -bottom-right

ionic4: ion-item border-top-left-radius, -top-right, -bottom-left, -bottom-right

css

sass

shadow-dom

ionic4

angular7