Question

我使用的是Ionic2，<ion-list>为items。目前它们只是香草，但我想应用样式，以便列表中的每个项目都有逐渐的阴影效果，如本例中的第一张图片所示（但是，我想使用颜色代替灰色阴影）： / p>

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

CSS阴影效果的项目列表

1 个答案: