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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.08.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读