利用box-shadow实现一个立体的按钮

改变按钮button的默认样式，创建一个立体的按钮

这个效果是通过box-shadow实现

这里要注意box-shadow是允许对同一个元素设置多个阴影的，需要用逗号分隔；多个阴影的层叠顺序是：写在前面的阴影将覆盖在后写的阴影上面

主要代码：

<button>Btn</button>

button {
  /* 关键是使用这个 盒子阴影 的样式 */
  box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
    6px -6px 8px inset rgba(0, 0, 0, 0.2);
}

/* 按钮被点击时将阴影切换 */
button:active {
  box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
    6px -6px 8px inset rgba(255, 255, 255, 0.6);
}

演示链接

CodePen演示链接：https://codepen.io/Zhao-Bocheng/pen/zYwrPEL

文章源码：https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/网页特效/利用box-shadow实现一个立体的按钮

参考：

https://www.bilibili.com/video/BV1w64y1b7eF