ion-segment-button 指示器轮廓边框

Question

我正在使用 Ionic/Angular v5 并且我正在尝试设置一组离子段按钮的样式，以便将 OUTLINE 边框作为指示器 我尝试使用阴影部分“indicator”和“indicator-background”来设置边框的颜色和粗细，并将背景颜色设置为透明以便显示为“轮廓”，但它没有得到设置

我得到 this 但我想要实现的是在选中的按钮周围有一个红色边框，并且仍然显示按钮的“原始”背景颜色。

我的 CSS 是：

&::part(indicator) {
  height: 100%;
  color: var(--ion-color-tertiary);
  border-width: 3px;
  border-color: var(--ion-color-tertiary);
}
&::part(indicator-background) {
  color: transparent;
}

关于如何实现我正在寻找的风格的任何想法？

非常感谢 克里斯

Answer 1

通过将 CSS 样式更改为：

&::part(indicator) {
  height: 100%;
  border-width: 3px;
  border-color: var(--ion-color-tertiary);
  border-style: inset;
}
&::part(indicator-background) {
  background: transparent;
}