ionic4：离子项目边界左上角半径，-右上，-左下，-右下答案

【问题标题】：ionic4: ion-item border-top-left-radius, -top-right, -bottom-left, -bottom-rightionic4：离子项目边界左上角半径，-右上，-左下，-右下
【发布时间】：2023-03-25 20:43:01
【问题描述】：

所以，我一直在使用 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 不起作用。根据文档：ion-item Ionic Documentation.

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

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

感谢您的宝贵时间！

【问题讨论】：

您是否考虑过不在该组件上使用影子 DOM？

标签： css sass angular7 ionic4 shadow-dom

【解决方案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

【讨论】：

哦，天哪，我希望我的雇主没有看到我的问题，当我问这个问题时，我的大脑被烧毁了，你完全正确。