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无法正常工作。根据文档ion-item Ionic Documentation，唯一可以更改Shadow DOM样式的变量是针对4 border-radius。

我也曾尝试将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

ionic4：离子项目边框左上半径，-右上，-左下，-右下

1 个答案: