微信小程序css卡片样式（带阴影效果）

微信小程序css卡片样式（带阴影）

效果图

wxml代码

<view class="card">
 
</view>  

css样式

.card{
  width: 90%;
  margin-left: 5%;
  height: 390rpx;
  background: rgb(226, 208, 208);
  border-radius: 10rpx;
  box-shadow: 5px 5px 5px #cdcfcf;
 }

css样式表注释

/*卡片的宽度*/  
width: 90%;
/*左外边距，这里代表距离最左边的距离*/
 margin-left: 5%;
/*卡片的高度。*/
 height: 390rpx;
/*背景色，可以自己更换*/
 background: rgb(226, 208, 208);
/* radius是卡片的边框的圆润c程度
   shadow是阴影效果，四个值分别为水平阴影，垂直阴影，模糊距离，阴影的颜色。
*/
 border-radius: 10rpx;
 box-shadow: 5px 5px 5px #cdcfcf;