作为一个合格的前端开发工程师，是能够将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>
