html - 如何使 ionic 透明的卡片左右边框

Question

下面是我的 HTML。我在三列中总共有 3 张卡片，只希望左侧和右侧透明。我尝试将边框设置为白色/透明但没有成功。 .我要的

.user-panel .card {
  margin-top: 1px;
}

.user-panel {
  min-height: 170px;
}

.user-panel,
.user-panel .card {
  display: flex;
  height: 100%;
}

.user-panel,
.user-panel .card .item {
  height: inherit;
  text-align: center;
}

.user-panel .user-profile-details .item {
  background-color: #edfaff;
}

<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div class="row"><i class="user-profile-icon"></i> </div>
              <div>{{data}}</div>
              <div>(015106)</div>
              </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
           </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
          </div>
         </span>
      </div>
    </div>
  </div>
</div>

Answer 1

你为什么用卡。只需提供一些自定义类名并为其定义 css 即可。像下面这样的东西可以毫无缺陷地工作。

<div class="col col-33 no-padding">
    <div class="card-access  no-padding">
        <div class="item item-text-wrap">
            <span>
                           <div>
                               <div>MY ACCESSES</div>
                           </div>
                       </span>
        </div>
    </div>
</div>