灵感来源：之前偶然看到一个词——模仿风格css中渐变，所以想知道它是什么。 “新拟态”英文称为Neumorphism，也有设计师称之为Soft Ui（软UI）。 简单来说，拟态风格是一种介于平面设计和投影效果之间的治疗效果，类似于圆形雕塑的效果。 我总结了一下。 对我来说，CSS模仿风格主要是利用阴影和一些修饰风格来让元素呈现出三维效果。 我将这些风格理解为模仿风格。 下面是拟态风格的设计图，可以帮助您更直观地了解拟态风格。 当然这张图是我从百度找到的（手动操控很搞笑，我的审美水平很难设计出类似的效果）。
实现思路如下：首先我们需要将背景颜色设置为黄色。 接下来，我将模拟一个登陆页面元素，一个登录表单。 以下是具体步骤：
第一步：添加背景色，并将body元素的背景色设置为黄色。 如果有特殊的兼容性需求，可以将padding和margin都设置为0。
body {
background-color: rgb(246, 223, 228);
}
效果图
第二步是添加元素。 这里的元素是登录表单。 由于框架使用uni-app框架，所以使用的元素标签是view而不是div。 当然，同理，如果是网页，也可以使用div。
代码HTML代码
<view class="card">
<view class="card__title"> <text>剑开天门</text> </view>
<view class="flex-row">
<u-form ref="formRef" class="card__form" :model="form" :rules="rules" label-width="120">
<u-form-item label="用户名" required prop="account">
<u-input
v-model="form.account"
type="text"
placeholder="请输入用户名"
placeholder-style="color:#999"
/>
</u-form-item>
<u-form-item label="密码" required prop="password">
<u-input
v-model="form.password"
type="password"
placeholder="请输入密码"
placeholder-style="color:#999"
/>
</u-form-item>
</u-form>
<view class="card__right-space"></view>
</view>
<view class="card__login">
<u-button plain type="primary" @click="login">登录</u-button>
</view>
</view>
CSS代码
.card {
position: absolute;
z-index: 9999;
text-align: center;
bottom: 40%;
left: 30rpx;
right: 30rpx;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.3), -10px 10px 10px rgba(225, 225, 225, 1);
border-radius: 20px;
&__title {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
&__login {
margin: 30rpx 45rpx;
border-bottom: 10rpx;
}
&__form {
width: 100%;
margin-left: 45rpx;
}
&__right-space {
width: 45rpx;
}
}
效果图
扩展的渐变现在具有三维效果，即着陆页。 元素的阴影和颜色匹配。 所以如果你觉得某种颜色太单一或者视觉冲击力不够，那么这个时候你就可以添加渐变色来降低视觉效果，让人感觉更加明亮。 那么什么是梯度呢？ css3的新特性 渐变 渐变是css3的一个新特性。它分为线性渐变（liner-gradient）和径向渐变（radialgradient）。 线性渐变（liner-gradient）：沿着一条看不见的轴，从起点到终点实现颜色的顺序渐变。 径向渐变（radial-gradient）：从起点到终点执行矩形渐变。 现在将背景颜色更改为渐变颜色并尝试线性渐变代码。
body {
background: linear-gradient(
111.4deg,
rgb(209, 231, 235) 7.4%,
rgb(238, 219, 199) 51.4%,
rgb(255, 159, 122) 82.6%,
rgb(255, 109, 58) 100.2%
);
}
线性渐变效果图
径向渐变代码
body {
background: radial-gradient(
circle at 50% 50%,
rgb(209, 231, 235) 7.4%,
rgb(238, 219, 199) 51.4%,
rgb(255, 159, 122) 82.6%,
rgb(255, 109, 58) 100.2%
);
}
径向渐变效果图
结合渐变和阴影生成令人眼花缭乱的模仿风格介绍完渐变后css中渐变，我们来尝试结合渐变和模仿。 我们已经在上面的背景中添加了渐变。 接下来我们给背景中的元素添加渐变，看看效果
向元素添加线性渐变
.card {
background: linear-gradient(
111.4deg,
rgb(209, 231, 235) 7.4%,
rgb(238, 219, 199) 51.4%,
rgb(255, 159, 122) 82.6%,
rgb(255, 109, 58) 100.2%
);
position: absolute;
z-index: 9999;
text-align: center;
bottom: 40%;
left: 30rpx;
right: 30rpx;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 10px rgba(225, 225, 225, 1);
border-radius: 20px;
&__title {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
&__login {
margin: 30rpx 45rpx;
border-bottom: 10rpx;
}
&__form {
width: 100%;
margin-left: 45rpx;
}
&__right-space {
width: 45rpx;
}
}
元素线性渐变效果图
向元素添加径向渐变
.card {
background: radial-gradient(
circle at 50% 50%,
rgb(209, 231, 235) 7.4%,
rgb(238, 219, 199) 51.4%,
rgb(255, 159, 122) 82.6%,
rgb(255, 109, 58) 100.2%
);
position: absolute;
z-index: 9999;
text-align: center;
bottom: 40%;
left: 30rpx;
right: 30rpx;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 10px rgba(225, 225, 225, 1);
border-radius: 20px;
&__title {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
&__login {
margin: 30rpx 45rpx;
border-bottom: 10rpx;
}
&__form {
width: 100%;
margin-left: 45rpx;
}
&__right-space {
width: 45rpx;
}
}
元素径向渐变效果图
线性渐变与阴影组合效果图
总结一下，其实玩了整个东西，虽然样式不一定好看，但是还是学到了一些css知识。 这套思路是在app上实现的，但是知识是css知识，所以在网页浏览器端也能达到同样的效果。 最后希望对您有所帮助。
