以 <ion-item> 删除底线 - HTML

在Ionic框架中，<ion-item> 是一个常用的UI组件，用于在移动应用程序中呈现交互式列表项。默认情况下，<ion-item> 具有底部边框线条，用于说明列表项之间的边界。

然而，有时候我们可能希望去除 <ion-item> 的底线，以实现更自定义的外观效果。下面是两种常用的方法来删除 <ion-item> 的底线。

方法一：使用CSS样式

通过添加自定义的CSS样式，我们可以轻松地删除 <ion-item> 的底线。

<ion-item class="no-border">
  <!-- 此处是 item 的内容 -->
</ion-item>

.no-border {
  --border-width: 0;
}

通过设置 --border-width 变量为0，我们可以将底线的宽度设为0，从而达到删除底线的效果。

方法二：使用 <ion-list>

另一种常用的方法是将多个 <ion-item> 包装在一个 <ion-list> 元素中，并通过在 <ion-list> 上添加属性 lines="none" 来删除底线。

<ion-list lines="none">
  <ion-item>
    <!-- 第一个 item 的内容 -->
  </ion-item>
  <ion-item>
    <!-- 第二个 item 的内容 -->
  </ion-item>
  <!-- 可以按需添加更多的 item -->
</ion-list>

通过设置 lines="none"，整个 <ion-list> 的底线将被移除，从而达到删除每个 <ion-item> 的底线的效果。

以上是两种常用的方法来删除 <ion-item> 的底线。根据具体的需求，选择其中一种方法来实现自定义的样式效果。

注意：以上代码片段中的CSS样式应与所使用的Ionic框架版本兼容。