Neumorphism新拟态设计计算器效果代码-html代码-BFW代码库

Neumorphism新拟态设计计算器效果代码

代码语言：html

代码描述：Neumorphism新拟态设计计算器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
        
                                        margin: 0;
        
                                        padding: 0;
        
                                        box-sizing: border-box;
        
                                        background-color: #ecf0f3;
        
                                        font-family: san-serif;
        
                                        outline: none;
        
        }
        
        .container {
        
                                        height: 100vh;
        
                                        display: flex;
        
                                        justify-content: center;
        
                                        align-items: center;
        
        }
        
        .calculator {
        
                                        background-color:#ecf0f3;
        
                                        padding: 15px;
        
                                        border-radius: 30px;
        
                                        box-shadow: inset 5px 5px 12px #ffffff,
        
                                        5px 5px 12px rgba(0,0,0,0.16);
        
                                        display: grid;
        
                                        grid-template-columns: repeat(4, 68px);
        
        }
        
        input {
        
                                        grid-column: span 4;
        
                                        height: 70px;
        
                                        width: 260px;
        
                                        background-color: #ecf0f3;
        
                                        box-shadow: inset -5px -5px 12px #ffffff,
        
                                        inset 5px 5px 12px rgba(0,0,0,0.16);
        
                                        border: none;
        
                                        border-radius: 30px;
        
                                        color: rgb(70,70,70);
        
                                        font-size: 50px;
        
                                        text-align: end;
        
                                        margin: auto;
        
                                        margin-top: 30px;
        
                                        margin-bottom: 30px;
        
                                        padding: 20px;
        
        }
        
        button {
        
                                        height: 48px;
.........完整代码请登录后点击上方下载按钮下载查看