网页css3实现键盘按钮立体预览效果

六月初六月初 CSS 2023-04-08 09:10:07

css3效果被如今越来越多的浏览器兼容，也就预示着css3的应用面越来越广。如今可以说绝大多数网站上都能或多或少的看到关于CSS效果的影子。
本文介绍一款基于css3特性实现的键盘按钮立体效果。
实现最终效果如图所示：


css3键盘按钮效果完整代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="code_show ">A</div>
		<style>
			.code_show{
				font-size: 22px;
				word-break: break-all;
				width: 45px;
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				border: 1px solid #ededed;
				box-shadow: 0 3px 5px #999;
				text-align: center;
				background-color: "#ededed";
				background-image: linear-gradient(-90deg, #ededed, #d5d5d5);
				background-image: -ms-linear-gradient(-90deg, #ededed, #d5d5d5)
			}
		</style>
	</body>
</html>

关键代码解析：






六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！