【CSS 技巧】CSS 多层阴影（box-shadow）炫酷边框效果详解
🧩 一、前言
在前端开发中，box-shadow 是一个非常强大的 CSS 属性。除了常见的阴影效果外，我们还可以通过多层阴影叠加的方式，实现各种酷炫的边框样式、立体效果，甚至是发光按钮等特效。
本文将带你深入了解如何利用多层 box-shadow 打造如图所示的“多层彩色阴影边框”效果👇
🎨 二、效果展示
💡 这是我们最终实现的效果（可复制下方代码自行预览）：
🧠 三、实现代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>CSS 多层阴影边框效果</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>div {width: 100px;height: 60px;margin: 25px;background: yellowgreen;/* 多层阴影叠加效果 */box-shadow: 0 0 0 10px #655, /* 第一层：深色外边框 */0 0 0 1