css实现凹凸效果

最新推荐文章于 2024-07-30 10:27:19 发布

鹏鹏敲码

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量654

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45277892/article/details/135773662

版权

效果

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>文字效果</title>
		<style>
			body {
				font: 700 80px "微软雅黑";
				background-color: #ccc;
				color: #ccc;
			}

			div {
				color: #ccc;
				font: 700 80px "微软雅黑";
			}

			.a1 {
				text-shadow: 1px 1px 1px #000, 
					-1px -1px 1px #fff;
			}
			.a2 {
				text-shadow: -1px -1px 1px #000, 
					1px 1px 1px #fff;
			}
			.input-box {
				background-color: #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.input-box input {
				border-radius: 1.5rem;
				border: none;
				box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.15);
				background-color: #ccc;
				color: #fff;
				flex: 1;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="a1">
			窗前明月光
		</div>
		<div class="a2">
			疑是地上霜
		</div>
		<div class="input-box">
			<input type="text"/>
		</div>
	</body>
</html>