巧用box-shadow实现布局区域间隔变色

巧用box-shadow实现布局区域间隔变色，实际上是给元素添加一个box-shadow阴影，然后把背景色变成透明，通过调整阴影的位置和模糊程度来达到变色的效果。整个过程步骤如下：

1.准备工作

在代码中选定你想要设置间隔变色的元素，例如ul标签。为了更好地处理间隔变色，我们需要为这个ul元素设置一个统一的背景色。

ul {
  background-color: #F2F2F2;
  padding: 0;
  margin: 0;
  list-style: none;
}

2.设置box-shadow

设置box-shadow的时候，需要分别设置垂直阴影，水平阴影，模糊半径以及阴影颜色，来达到我们期望的效果。

ul li {
  box-shadow: 
    0px 5px 5px -5px rgba(0,0,0,0.5),/* 上方阴影，与上面的元素产生间隔 */
    0px -5px 5px -5px rgba(0,0,0,0.5),/* 下方阴影，与下面的元素产生间隔 */
    5px 0px 5px -5px rgba(0,0,0,0.5),/* 左侧阴影，与左侧的元素产生间隔 */
    -5px 0px 5px -5px rgba(0,0,0,0.5);/* 右侧阴影，与右侧的元素产生间隔 */
  background-color: transparent;/* 设置背景透明 */
  margin: 5px;/* 给元素设置margin，用来控制间隔大小 */
}

代码解释：

• 第一条阴影给上方留出空隙，与上面的元素产生间隔；
• 第二条阴影给下方留出空隙，与下面的元素产生间隔；
• 第三条阴影给左侧留出空隙，与左侧的元素产生间隔；
• 第四条阴影给右侧留出空隙，与右侧的元素产生间隔；
• 背景颜色设为transparent，使其变为透明；
• 为了控制间隔大小，设置了margin。

通过以上设置，就可以实现布局区域间隔变色。

示例1

以下是一个完整的示例代码，它会将含有li元素的ul元素隔行变色，并且每个元素与周围元素有一个 5px 的间隔：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
  <li>第六项</li>
</ul>

ul {
  background-color: #F2F2F2;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  box-shadow: 
    0px 5px 5px -5px rgba(0,0,0,0.5),
    0px -5px 5px -5px rgba(0,0,0,0.5),
    5px 0px 5px -5px rgba(0,0,0,0.5),
    -5px 0px 5px -5px rgba(0,0,0,0.5);
  background-color: transparent;
  margin: 5px;
}

示例2

如果你想使得相邻元素之间没有间隔，只是将它们的背景颜色变化，可以修改 box-shadow 的透明度，如下所示：

ul li {
  box-shadow: 
    0px 5px 5px -5px rgba(0,0,0,0.1),
    0px -5px 5px -5px rgba(0,0,0,0.1),
    5px 0px 5px -5px rgba(0,0,0,0.1),
    -5px 0px 5px -5px rgba(0,0,0,0.1);
  background-color: transparent;
  margin: 0;
}

通过调整阴影的透明度来达到变色的效果，这样你在相邻元素之间就可以避免了间隔，直接变换背景颜色，达到一个更加紧凑的效果。

完整示例代码：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
  <li>第六项</li>
</ul>

ul {
  background-color: #F2F2F2;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  box-shadow: 
    0px 5px 5px -5px rgba(0,0,0,0.1),
    0px -5px 5px -5px rgba(0,0,0,0.1),
    5px 0px 5px -5px rgba(0,0,0,0.1),
    -5px 0px 5px -5px rgba(0,0,0,0.1);
  background-color: transparent;
  margin: 0;
}