⽤CSS⼿写⼀个“拟态“风格按钮index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" type="text/less" href="./less/index.less"/>
<script src="cdn.bootcdn/ajax/libs/less.js/4.1.1/less.js"></script>
<body>
<div class="box">
<button id="btn">按钮</button>
</div>
</body>
</html>
index.less
*{
padding: 0;
margin: 0;
outline: 0;
font-family: helvetica;
user-select: none;
}
body{
.box{
width: 100px;
height: 100px;
margin: 100px auto;
#btn{
width: 80px;
height: 80px;
border-radius: 50%;
border: 0;
box shadow怎么设置font-size: 24px;
-moz-box-shadow:0px 0px 20px #a5a5a5;
-webkit-box-shadow:0px 0px 20px #a5a5a5;
box-shadow:0px 0px 20px #a5a5a5;
color:#676767;
}
:active{
margin-top: 1px;
}
}
}
效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。