微信小程序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;