如何在Ionic 3中为网格行添加自定义CSS下边框

嘿，先提个小建议：你现在把<ion-grid>放在*ngFor循环里，会生成一堆独立的网格，其实更合理的是把网格包在外面，只循环每一行，这样结构更规范，也方便统一加样式。调整后的HTML大概是这样：

<ion-grid>
  <ion-row *ngFor="let item of items" class="row-with-border">
    <ion-col>
      <img src='../assets/imgs/doctor.png'>
    </ion-col>
    <ion-col col-10>
      {{item}}
    </ion-col>
  </ion-row>
</ion-grid>

接下来给你几种添加下边框的方式，按需选择就行：

1. 自定义CSS类（最灵活推荐） #

在你的组件专属样式文件（比如[页面名].component.scss）里写一个类：

.row-with-border {
  border-bottom: 1px solid #e0e0e0; /* 颜色和粗细都可以自己调，比如换成#ccc或者2px */
  padding-bottom: 10px; /* 可选，给内容和边框留点空隙，看着更舒服 */
  margin-bottom: 10px; /* 可选，行与行之间的间距 */
}

然后给每个<ion-row>加上这个类，就像上面的示例那样，这样只有你指定的行会有边框，不会影响其他地方。

2. 用Ionic内置工具类（快速省事） #

如果你的Ionic版本是5及以上，有现成的边框工具类可以直接用，不用自己写CSS：

• border-b：直接加底部边框
• border-b-2：把边框改成2px粗（数字可以换，比如border-b-3）
• border-gray-300：设置边框颜色（这个是Tailwind风格的颜色类，Ionic内置了很多）

直接把这些类加到<ion-row>上就行：

<ion-row *ngFor="let item of items" class="border-b border-gray-300">
  <!-- 你的列内容 -->
</ion-row>

这种方式最快，适合快速实现需求。

3. 全局样式（适合全应用统一风格） #

如果你想让整个App里的所有<ion-row>都带底部边框，可以在global.scss里加这段样式：

ion-row {
  border-bottom: 1px solid #f0f0f0;
}

不过要注意，这样会影响所有页面的行，要是某个页面不需要边框还得单独覆盖，所以除非是全局统一需求，不然不推荐。

4. 换用ion-item组件（适合列表场景） #

如果你的布局是列表形式，其实用Ionic的<ion-item>更合适，它默认就带底部边框，样式也更统一：

<ion-list>
  <ion-item *ngFor="let item of items">
    <ion-avatar slot="start">
      <img src='../assets/imgs/doctor.png'>
    </ion-avatar>
    <ion-label>{{item}}</ion-label>
  </ion-item>
</ion-list>

这种方式不用自己折腾边框样式，Ionic已经帮你做好了，还自带点击反馈之类的交互，很适合列表类的页面。

内容的提问来源于stack exchange，提问作者nff