<style>
/*
box-shadow盒子生成阴影
水平偏移(x) 和 垂直偏移(y) 模糊半径 扩展半径 颜色
模糊半径用来控制阴影边缘模糊区域的大小，可以为阴影生成一个更柔和、有点透明的边缘。
扩展半径用来控制阴影的大小，设置为正值可以使阴影全方位变大，设为负值则会变小。
text-shadow文字生成阴影
*/
div{
box-shadow:2px 2px 2px 1px black;
/* 水平偏移(x) 和 垂直偏移(y) 模糊半径 扩展半径 颜色 */
}
.button{
padding:1em;
border:0;
font-size:0.8rem;
color:white;
border-radius: 0.5rem;
/* linear-gradient 渐变 */
background-image:linear-gradient(to bottom, #57b,#148);
box-shadow: 0.1em 0.1em 0.5em #124;
}
.button:active{
/* inset 内阴影 */
box-shadow:inset 0 0 0.5em #124,
inset 0 0 0.5em 1em rgba(0,0,0,0.4);
}
button:focus{ outline: none; }
</style>
<body>
<button class="button">Sign up now</button>
</body>