僅將插入框陰影應用于觸摸單元格的外部

我有一個單元格網格。我想創建一個凸起的綠色細胞和“壓入”紅色的效果。對于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>

任何建議如何解決單元格之間顯示陰影的問題？[編輯] 為需要陰影的每一面添加類名

uj5u.com熱心網友回復：

如果您知道一行中的單元格數 (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>

標籤：javascript css

上一篇：如何防止HTML選項溢位？

下一篇：僅當輸入為空且未聚焦時才選擇標簽？[復制]