微信小程序——多重边框效果

大多数人都用过box-shadow来生成投影，我们可以通过设置模糊值（第三个参数）为零，扩张半径（第四个参数）为一个正值来实现一个实线边框，效果等同于border实现的边框效果。

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

box-shadow还有一个好处是，它支持逗号分隔语法，我们可以创建任意数量的投影，需要注意的是，box-shadow是层层叠加的，第一层投影位于最顶层，依次类推。因此，你需要按此规律调整扩张半径，比如在前面代码中，我们想在外圈再加一道5px的外框，那就需要制定扩张半径的值为15px（10px+5px），依次类推，根据box-shadow的这个特性，我们可以轻松的实现多重边框效果：

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);