文章转载来自：https://www.frbkw.com/3110/
我们在观察封面图片的时候可以发现我们的按钮的颜色和背景是比较相近的，而且在左上角部分是有白色的阴影，
在右下角会有颜色比较重的黑色阴影，基本也就是三种高是模糊然后图层叠加；
PS操作我们绘制3个圆角矩形，
第一个为白色，
第二个颜色贴近背景色，
第三个在第二颜色的基础上在淡化一点，
如下图：
在刚接新拟物风格化的时候 ，比较担心的是在uni-app中如何实现，因为我们肉眼看过去就像在地面凸起一个按钮；
其实在web前端还是可以实用box-shadow:实现，前端实现：
[Asm] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box-weh{
width: 800px;
height: 500px;
background-color: #c1dff3;
position: relative;
}
.box-btn{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 80px;
border-radius: 20px;
background-color: #c1dff3;
position: absolute;
box-shadow: -5px -5px 10px 0px #f4faff,
10px 10px 10px 0px #aac6d8;
}
}
</style>
</head>
<body>
<div id="" class="box-weh">
<div id="" class="box-btn">
</div>
</div>
</body>
</html>
| 
发表于 2020-11-18 09:10
