javascript - CSS 框阴影重叠

Question

我用CSS做了一个滑动拼图，你可以查看in this fiddle

问题是我希望瓷砖在灰色背景上有阴影，但我不希望阴影与其他瓷砖重叠，因为它们都在同一水平面上。

我看过 this question在 StackOverflow 上，它实际上在问同样的事情，但我似乎无法获得任何解决方案。

我不能cover the overlap with a pseudo-element , 因为它们有背景图像，其背景位置是在 JavaScript 中设置的。虽然我可以使用使用 nth-child 的复杂 CSS 选择器来设置它们，但我现在宁愿将其保留在 JS 中。

我不能put the shadow on a pseudo-element underneath the tile ，因为实际上我不知道。我在我链接的 Fiddle 中试过它，但它不起作用。

如有任何帮助，我们将不胜感激。谢谢!

// This is the location of the empty square. At the start it's at 2, 2
var emptyRow = 2;
var emptyCol = 2;

// i and j, as passed in, are the tiles' original coordinates
var makeMoveHandler = function (tile, i, j) {
  // row and col, as made here in closure, are the tiles up-to-date coordinates
  var row = i;
  var col = j;

  // The click handler
  return function () {
    var rowOffset = Math.abs(emptyRow - row);
    var colOffset = Math.abs(emptyCol - col);

    // Move the tile to the vacant place next to it
    if (rowOffset == 1 && colOffset == 0 || rowOffset == 0 && colOffset == 1) {
      tile.style.transform = `translate(${emptyCol * 200}px, ${emptyRow * 200}px)`;
      // Swap the two coordinates
      [row, emptyRow] = [emptyRow, row];
      [col, emptyCol] = [emptyCol, col];
    }
  }
};

var initTiles = function () {
  // Get all of the rows
  var rows = document.querySelectorAll('.row');

  // Go through the rows
  for (let i = 0; i < rows.length; ++i) {
    var row = rows.item(i);

    // Go through the tiles on each row
    var tiles = row.querySelectorAll('.tile');
    for (let j = 0; j < tiles.length; ++j) {
      var tile = tiles.item(j);

      // Add the click listener to the tile
      tile.addEventListener('click', makeMoveHandler(tile, i, j));

      // Set the location of the tile
      tile.style.transform = `translate(${j * 200}px, ${i * 200}px)`;

      // Set what part of the background to show on the tile
      tile.style.backgroundPosition = `${600 - j * 200}px ${600 - i * 200}px`;
    }
  }
};

// Initialize the tiles
initTiles();

#puzzle {
  width: 600px;
  height: 600px;
  display: flex;
  background-color: gray;
  border: 5px solid blue;
}

.tile {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-image: url('http://www.lovethispic.com/uploaded_images/123553-Beautiful-Scene.jpg');
  position: absolute;
  background-size: 600px 600px;
  transition: transform 300ms;
}

.tile:before {
  background: transparent;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -100;
  box-shadow: 0 0 40px #000;
}

<div id="puzzle">
  <div class="row">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
  <div class="row">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
  <div class="row">
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

Answer 1

您可以在包含所有行和图 block 的新元素上使用 filter: drop-shadow(0 0 40px #000):

<div id="puzzle">
   <div class="puzzle-inner" style="filter:drop-shadow(0 0 40px #000);">
      <div class="row"> ...

这适用于它所包含元素的累积“轮廓”。

这不适用于 #puzzle 元素本身，因为它有一个背景集，将包含在剪影中。