仅将内嵌框阴影应用于触摸单元的外部。

Question

我有一格的细胞。我想要创造一个效应，提高绿色细胞和“按在”红色。对于提升效果，box-shadow在右下角外的效果很好，因为下一个单元格覆盖以前的单元格阴影。对于左上角的“按下”效果box-shadow: inset似乎是一个不错的选择，然而，我正在努力使它与触摸细胞，他们显示阴影之间的细胞。

​

const list = [],
      type = {red:[2,5,6,16,17,11,12,13,36,46,38,48,21,22,23,31,32,33], green:[37,47,39,49,65,66,67,75,76,77,85,86,87,81,82,92,93]},
      width = 10,
      height = 10;

for(let i = 0, t; i < 100; i++)
{
  t = type.red.includes(i) ? "red" : type.green.includes(i) ? "green" : "";
  list[i] = t;
  const c = document.createElement("div");
  if (list[i])
    c.className = list[i];

// add class for each side outside of the cluster
  if (t = type[t])
  {
    if (!t.includes(getIndexOffset(i, 0, -1)))
      c.classList.add("top");

    if (!t.includes(getIndexOffset(i, 1, 0)))
      c.classList.add("right");

    if (!t.includes(getIndexOffset(i, 0, 1)))
      c.classList.add("bottom");

    if (!t.includes(getIndexOffset(i, -1, 0)))
      c.classList.add("left");
  }
  table.appendChild(c);
}

function getIndexOffset(index, offsetX, offsetY)
{
  return (~~(index / width) + offsetY) * width + (index % width + offsetX);
}

#table
{
  display: flex;
  flex-wrap: wrap;
  width: 11em;
}

#table > *
{
  width: 1em;
  height: 1em;
  border: 1px solid black;
  margin: -1px 0 0 -1px;
  background-color: white;
}

#table > .green
{
  background-color: lightgreen;
  box-shadow: 0.2em 0.2em 5px 0 black;
  z-index: 1;
}

#table > .red
{
  background-color: pink;
  box-shadow: 0.2em 0.2em 5px 0 black inset;
  z-index: 3;
}

<div id="table"></div>

​

有什么建议可以解决细胞间阴影显示的问题吗？为需要阴影的每一方编辑添加的类名。

Answer 1

如果您知道一行(n)中单元格的数量，或者可以计算出它，那么您可以添加左边、顶部或两个阴影样式，而不是总是将顶部和左侧阴影添加到一个红细胞中。

这个片段使用线性梯度而不是嵌入阴影(因为我觉得嵌入阴影太混乱了……)

​

const n = 10; //number of cells in a row

for (let i = 0, r = [2, 5, 6, 16, 17, 11, 12, 13, 36, 46, 38, 48, 21, 22, 23, 31, 32, 33], g = [37, 47, 39, 49, 65, 66, 67, 75, 76, 77, 85, 86, 87, 81, 82, 92, 93]; i < 100; i++) {
  const c = document.createElement("div");

  if (r.includes(i)) {
    c.classList.add('red');
    // r - n is the position of the cell immediately vertically above (if there is one else < 0)
    // if (!r%n == 0) r - 1 is the position of the cell immediately horizontally to the left 
    if (!r.includes(i - n) && (i % n == 0 || !r.includes(i - 1))) {
      c.classList.add('bothShadows');
    } else {
      if (!r.includes(i - n)) c.classList.add('topShadow');
      if (!r.includes(i - 1)) c.classList.add('leftShadow');
    }
  }

  if (g.includes(i))
    c.className = "green";

  table.appendChild(c);
}

#table {
  display: flex;
  flex-wrap: wrap;
  width: 11em;
}

#table>* {
  width: 1em;
  height: 1em;
  border: 1px solid black;
  margin: -1px 0 0 -1px;
  background-color: white;
}

#table>.green {
  background-color: lightgreen;
  box-shadow: 0.2em 0.2em 5px 0 black;
  z-index: 1;
}

#table>.red {
  background-color: pink;
  background-repeat: no-repeat;
  z-index: 3;
}

#table>.topShadow {
  background-image: linear-gradient(black, transparent);
  background-size: 100% 5px;
}

#table>.leftShadow {
  background-image: linear-gradient(to right, black, transparent);
  background-size: 5px 100%;
}

#table>.bothShadows {
  background-image: linear-gradient(to right, black, transparent), linear-gradient(black, transparent);
  background-size: 5px 100%, 100% 5px;
}

<div id="table"></div>

​