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将不起作用。根据文档：border-radius，唯一可以改变Shadow DOM样式的4个ion-item Ionic Documentation。

我也尝试将style硬化为元素，但它不起作用。

如果有人能为此投入一些亮点，我真的很感激。

谢谢你的时间！

Answer 1

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

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

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

您可以获得有关边界半径属性here的更多信息

更重要的是，我认为你没有正确选择第一个孩子

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

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

Check this on JSFiddle