input输入框内阴影效果

作为一个合格的前端开发工程师,是能够将UI的设计图百分百还原的,不管设计图有多么的炫酷,都能够做到,当然也是从细节上一点点的实现的。今天继续记录简单的input输入框内阴影效果,效果如下:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            div {
                width: 400px;
                height: 100px;
                background: #0d1c2f;
                text-align: center;
            }
            
            input {
                width: 230px;
                border: none;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
                box-shadow: 0px 0px 10px #005efe inset;
                background: #0d1c2f;
                color: #fff;
                margin-top: 22px;
                padding: 7px;
            }
        </style>
    </head>

    <body>
        <div>
            <input placeholder="员工姓名" id="sname" class="layui-input search_input" type="text">
        </div>

    </body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券