項目列表的CSS陰影效果

Question

我正在使用Ionic2並且有<ion-list>的items。目前他們只是香草，但我想應用樣式，以便列表中的每個項目都具有漸變陰影效果，如本例中的第一張圖片所示（但是，我不想使用灰色陰影，而是使用顏色）：

https://www.google.co.za/imgres?imgurl=http%3A%2F%2Fwww.theartimes.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fb558230ff6486bf2996aaebb181337e0.png&imgrefurl=http%3A%2F%2Fwww.theartimes.com%2Fpage%2F17%2F%3Fp%3Donline-slot-machines&docid=NBkAfMRmbo-fjM&tbnid=-fRTtIx7JygAEM%3A&vet=1&w=600&h=1083&itg=1&bih=950&biw=1920&ved=0ahUKEwjc5L_00LHQAhXIBcAKHYdbCk84oAYQMwhCKD8wPw&iact=mrc&uact=8

我的代碼如下：

<ion-list> 
    <ion-item-sliding *ngFor="let item of personModels" (click)="itemTapped($event, item, true)"> 
     <ion-item class="item-search"> 
     <ion-avatar item-left><img [src]="item.avatar64 ? item.avatar64 : 'images/blank-profile-picture.png'"></ion-avatar> 
     <ion-row > 
      <ion-col><h2>{{item.person.firstName}}&nbsp;{{item.person.lastName}}</h2></ion-col> 
     </ion-row> 
     <ion-row > 
      <ion-col>more details</ion-col> 
     </ion-row> 
     </ion-item> 

    </ion-list> 

UPADTE

我增加了以下內容：

<ion-list> 
    <ion-item-sliding *ngFor="let item of personModels" (click)="itemTapped($event, item, true)"> 
     <ion-item class="item-search"> 
... 
    </ion-item-sliding> 
    </ion-list> 

.item-search { 
    border-radius: 50%; 
    width: 100%; 
    height: 1px; 
    position: absolute; 
    left: 0; 
    bottom: -4px; 
    background: black; 
    border: 3px solid black; 
    margin: -5px auto 0; 
    z-index: 2; 
    padding-left: 1px; 
} 

，這是結果：

Answer 1

好吧，如果你想有一個影子，先不談box-shadow屬性了一下，並嘗試了這一點http://codepen.io/vividuaelsaphe/pen/xRRMxP

基本上：

.shadow { 
    border-radius: 50%; 
    width: 100%; 
    height: 1px; 
    position: absolute; 
    left: 0; 
    bottom: -4px; 
    background: black; 
    border: 3px solid black; 
    margin: -5px auto 0; 
    z-index: 2; 
} 

所以在你的代碼中它會是

<ion-col> 
    <h2>{{item.person.firstName}}&nbsp;{{item.person.lastName}}</h2> 
    <div class="shadow"><div> 
</ion-col> 

更新於codepen。