懒人模板 小程序模板
扫码进入模板家园小程序

css3实现按钮阴影效果

热度:
作者:来自网络 收集:微信小程序学习
更新时间:2022-12-12 15:34:01

 css3实现按钮阴影效果,演示如下:
\
在index.wxss中加入代码:
 .lrmb_shadow{
background:red;
box-shadow: 5rpx 5rpx 5rpx 5rpx gray; 
color:#fff;
}
其中,index.wxml中加入代码:
<button class="lrmb_shadow">
小程序阴影效果
</button>

本文中采用CSS中的box-shadow属性
语法:
 
box-shadow: h-shadow v-shadow blur spread color inset;
 
参数介绍:
 
h-shadow: 必需的,水平阴影的位置,可以为负值;
v-shadow:必需的,垂直阴影的位置,可以为负值;
blur:可选,模糊的距离;
spread:可选,阴影的大小;
color:可选,阴影的颜色,可以直接选择自带的色彩效果;
inset:可选,外部阴影(outset)或者内部阴影(inset),默认外部阴影;

网站介绍

新手学习先从基础模板开始!懒人模板提供各类免费的模板下载,是您学习的好帮手!站点地图