uni_app 小程序 用 box -shadow 写简单 美观 的按钮效果

1. 首先简单说一下 css3 出的 box-shadow 属性， 控制的外阴影 与内阴影
   box-shadow: h-shadow v-shadow blur spread color inset;
   h-show:水平距离的位置 ，可以是负值
   v-show:水平距离的位置 ，可以是负值
   blur:可选。模糊距离
   spread: 可选。阴影的大小
   color:可选。阴影的颜色
   inset:内阴影（与外阴影 方向相反）

2. 先看效果图
   

首先先看一下这个按钮的样式 ，无点击状态的 用的渐变色，写的按钮

background: linear-gradient(180deg, rgba(118, 178, 249, 1) 0%, rgba(65, 131, 255, 1) 100%);

这个观看点击状态的按钮，内阴影发生了变化，渐变色看起了就与点击状态的按钮相反了，观察渐变色是上下渐变 ，所以只需改变内阴影的垂直方向的阴影
这是点击状态代。

box-shadow: inset 0 -10rpx 25rpx 15rpx rgba(118, 178, 249, 1), inset 0 50rpx 25rpx 15rpx rgba(65, 131, 255, 1);

再加一点 点击感觉 ，相对定位 position: relative; top1rpx;
套路都是样的，在根据实际情况调整一下。简单，美观的按钮效果就可以了。

3.完整代码

button {
	font-size: 32rpx;
	font-family: PingFang-SC-Bold, PingFang-SC;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
	line-height: 100rpx;
	text-align: center;
	width: 690rpx;
	height: 100rpx;
	margin: 20rpx 26rpx 20rpx 34rpx;
	background: linear-gradient(180deg, rgba(118, 178, 249, 1) 0%, rgba(65, 131, 255, 1) 100%);
	border-radius: 8rpx;
	opacity: 0.65;
	position: relative;
}
.effect {
	top: 1rpx;
	box-shadow: inset 0 -10rpx 25rpx 15rpx rgba(118, 178, 249, 1), inset 0 50rpx 25rpx 15rpx rgba(65, 131, 255, 1);
}