如何使離子透明卡的左右邊框

以下是我的HTML。我有三列三張牌，只需要左右兩側透明。我曾嘗試將邊框設置爲白色/透明，但沒有成功。。我想如何使離子透明卡的左右邊框

.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>

來源

2017-05-04 FalconFlyer

分享css？ – cosmoonot

@cosmoonot我已添加我的CSS。 – FalconFlyer

你爲什麼要用卡。只需給一些自定義類名稱併爲其定義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>

來源

2017-05-05 11:41:00 Delfin

非常感謝我的工作！ :) – FalconFlyer

.user-panel .card { 
     border: 1px solid #ccc; 
//remove this 
    } 


//add this 
    .bordered-col { 
     border-right : 1px solid #ccc; 
    } 

<div class="row no-padding user-panel"> 
    <div class="bordered-col 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>

來源

2017-05-04 05:37:04 RemyaJ

邊框是因爲卡不列。 – FalconFlyer

嘗試在每個我的接入例如添加class什麼<div class="access1">MY ACCESS</div>和<div class="access2">MY ACCESS</div>然後添加這個CSS樣式：

.no-padding > span > .access1{ 
    border-right: 0; 
} 

.no-padding > span > .access2{ 
    border-left: 0; 
}

請附上您的CSS樣式了，所以我們可以計算您的問題。如果它不起作用，請留言。

來源

2017-05-04 06:08:20

如何使離子透明卡的左右邊框

回答

相關問題