box-shadow写3d搜索栏

最新推荐文章于 2022-09-13 22:48:09 发布

最帅程序员

最新推荐文章于 2022-09-13 22:48:09 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/weixin_40222803/article/details/78060230

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>shadow</title>
	<style type="text/css">
		.cl:after{
			content:"";
			height: 0;
			overflow: hidden;
			clear: both;
			visibility: hidden;
		}
		*{
			padding: 0;
			margin: 0;
		}
		.a{
			width: 1352px;
			height: 130px;
			border:3px solid #aaaaaa;
			margin:auto;
			padding: 24px;
			margin-top:100px;
			background: #ebe9ea;
			border-radius:28px;
			box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;
			-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;
			-moz-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;
			-ms-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;
			-o-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;
		}
		input{
			cursor:pointer;
			outline: none;
		}

		input[type="text"]{
			width: 1020px;
			height: 120px;
			float: left;
			border:3px solid #cccccc;
			font-size: 37px;
			color:#a9a9a9;
			text-indent:17px;
			border-radius:8px;
			box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;
			-moz-webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;
			-ms-webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;
			-o-webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;
			webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;
		}
		input[type="submit"]{
			width: 296px;
			height: 126px;
			float: right;
			border:3px solid #01748f;
			font-size:37px;
			color:white;
			background: #25a6bb;
			border-radius:8px;
			box-shadow: inset 0 3px 0 #6ec8d3;
			text-shadow:0 3px 0 #0e6b7a;
			-moz-webkit-box-shadow: 0 3px 0 #0e6b7a;
			-ms-webkit-box-shadow: 0 3px 0 #0e6b7a;
			-o-webkit-box-shadow: 0 3px 0 #0e6b7a;
			webkit-box-shadow: 0 3px 0 #0e6b7a;
		}

	</style>
</head>
<body>
	<div class="a cl">
		<input type="text" placeholder="HTML5,HTML5,HTML5...">
		<input type="submit" value="GO">
	</div>
</body>
</html>