CSS Box Shadow Overlap

Question

我在CSS中制作了一个滑动拼图，你可以查看in this fiddle

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

我在StackOverflow上看到过this question，它真的在问同样的事情，但我似乎无法让任何解决方案正常工作。

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

我不能put the shadow on a pseudo-element underneath the tile，因为我不知道，实际上。我在小提琴中尝试了它，但它没有用。

任何帮助，将不胜感激。谢谢！

// 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

我终于找到了解决问题的两种方法，两者都不是很漂亮。我不能有一个box-shadow，我已经接受了这个。但是，我可以创建一个包含box-shadow图片的伪元素，所以我这样做了。

我无法忍受浏览器必须为阴影下载完全独立的图像的想法，因此我使用CSS3渐变来制作box-shadow的近似值（至少在Chrome中）。

（某种）模拟box-shadow的片段：

div {
  width: 200px;
  height: 200px;
  margin: 50px;
  background-color: green;
  position: relative;
  opacity: 0.5;
}
div:before {
  position: absolute;
  content: '';
  left: -20px;
  right: -20px;
  top: 0;
  bottom: 0;
    background: linear-gradient(90deg, transparent 220px, black 220px, transparent 240px ),
  linear-gradient(-90deg, transparent 220px, black 220px, transparent 240px );
  z-index: -1;
}
div:after {
  position: absolute;
  content: '';
  top: -20px;
  bottom: -20px;
  left: 0;
  right: 0;
    background: linear-gradient(0deg, transparent 220px, black 220px, transparent 240px ),
  linear-gradient(180deg, transparent 220px, black 220px, transparent 240px );
  z-index: -1;
}

<div></div>

一个JSFiddle with the sliding puzzle result，因为它在这里的片段中不能正常工作。

Answer 2

您可以在包含所有行和切片的新元素上使用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元素本身，因为它有一个背景集，将包含在轮廓中。