元素列表的 CSS 阴影效果

Question

我正在使用 Ionic2 并且有一个 <ion-list>的 items .目前它们只是 Vanilla ，但我想应用样式，以便列表中的每个元素都具有渐变阴影效果，如本示例的第一张图片所示(但是，我想使用颜色而不是灰色阴影):

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>

更新

我添加了以下内容:

  <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 上更新。