css3 径向渐变-css模仿风格尝试及css3新功能渐变使用

灵感

因为之前偶然看到了模仿风格这个词，那么什么是模仿风格呢？ “Neomorphism”的英文名称为Neumorphism，也有设计师称之为SoftUi（软UI）。 简单来说，它是一种类似于圆形雕塑的疗效，介于平面和投影之间。 我把自己理解的css模仿风格大致总结如下。 通过使用阴影和一些风格修改来推动元素达到三维效果，我将其理解为一种模仿风格。 下面贴出拟态风格的设计图，让大家对拟态有一个直观的概念。 其实图是百度抄的（自动搞笑，实在设计不美观）。

实施思路

首先，背景必须先调整为白色，然后添加元素。 我模拟的是登陆页面的元素，这是一个登录表单。 话不多说css3 径向渐变，开始吧。

第一步是添加背景颜色

背景色主要是设置正文的背景。 如果需要特殊的兼容性，需要将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新特性渐变（Gradient）

渐变是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%
    );
}

放射状渐变疗效图

将渐变与阴影相结合，打造令人惊叹的拟物图案

介绍完渐变之后，我们尝试将渐变和拟态结合起来。 我们已经在背景中添加了渐变。 接下来我们给背景中的元素添加渐变，看看效果

向元素添加线性渐变

.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;
    }
}

元素径向渐变疗效图

线性渐变和阴影结合治疗图表

径向渐变与阴影组合疗效图

总结

其实都玩起来了，虽然样式不一定好看css3 径向渐变，但还是学到了一些css知识。 这套思路是在app上实现的，知识就是css知识，所以在网页浏览器端也能达到同样的效果。 最后希望对您有所帮助。