css - 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 个不同的值。

值按此顺序描述 - 第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角。

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

You can get more information on the border radius property here

此外，我认为您没有正确选择第一个 child

在嵌套的 SCSS 文件中，您宁愿输入:

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

Check this on JSFiddle