网页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>
关键代码解析:
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
1312人已阅读