CSS-如何在图像后面插入可动画显示的偏移边框？

Question

我无法使用CSS来复制下面的布局，该CSS的黑色边框偏移且位于图片的后面：

我尝试使用border属性，但是显然不起作用，因为我不知道是否可以抵消它。

理想情况下，我还应该能够移动/动画该边框，以便在将图像悬停时减少偏移量。

Answer 1

更简单的解决方案：使用盒形阴影

如果图像下面的背景为单色，则可以使用带有两个阴影的box-shadow：

html,
body {
  height: 100vh;
  margin: 0;
}
  
body {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame {
  height: 75vh;
  box-shadow:
    10px -10px 0 -5px yellow,
    10px -10px 0 0 black;
    
  transition: box-shadow ease-in 150ms;
}

.frame:hover {
  box-shadow:
    5px -5px 0 -5px yellow,
    5px -5px 0 0 black;
}

<img class="frame" src="https://cdn.motor1.com/images/mgl/7WjgW/s3/1974-lancia-stratos-hf-stradale-for-sale.jpg" />

使用框阴影时的限制

如果背景不是纯色，您将无法正确遮盖最下面阴影的多余部分，因此您将得到如下内容：

html,
body {
  height: 100vh;
  margin: 0;
}
  
body {
  background: linear-gradient(cyan, yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame {
  height: 75vh;
  box-shadow:
    10px -10px 0 -5px cyan,
    10px -10px 0 0 black;
    
  transition: box-shadow ease-in 150ms;
}

.frame:hover {
  box-shadow:
    5px -5px 0 -5px cyan,
    5px -5px 0 0 black;
}

<img class="frame" src="https://cdn.motor1.com/images/mgl/7WjgW/s3/1974-lancia-stratos-hf-stradale-for-sale.jpg" />

更好但更复杂的解决方案：在图像周围使用包装元素，并使用带有边框的伪元素

解决上述问题的方法是在该图像周围使用包装元素。然后，该元素将具有带有::before而不是::after的伪元素（border或box-shadow）。

要对其进行动画处理/移动，则可以使用transform而不是更改边框本身：

html,
body {
  height: 100vh;
  margin: 0;
}
  
body {
  background: linear-gradient(cyan, yellow);
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  height: 75vh;
  display: block;
}

.frame {
  position: relative;
}

.frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  box-sizing: border-box;
  border: 5px solid black;
  transform: translate(10px, -10px);
  transition: transform 150ms;
}

.frame:hover::before {
  transform: translate(5px, -5px);
}

<div class="frame">
  <img  src="https://cdn.motor1.com/images/mgl/7WjgW/s3/1974-lancia-stratos-hf-stradale-for-sale.jpg" />
</div>

请注意，我还添加了box-sizing: border-box。否则，::before伪元素的大小将是父对象的大小+边框周围的宽​​度，因此边框看起来比图像大。使用box-sizing: border-box时，边框和填充的大小将从总大小中减去。

效果说明

您是否注意到最后一个示例比其他两个示例移动得更平稳，甚至更快？这是因为your browser is now using hardware acceleration to move it，以前不是这种情况。

因此，如果您需要移动/设置动画，我建议您使用此方法。否则，如果您的背景是纯色的并且边框没有设置动画，则可以使用box-shadow方法，该方法只涉及几行CSS。

Answer 2

也许有一种更优雅的方法，但我会这样解决：

.frame-wrapper {
  display: inline-block;
  position: relative;
}

.frame-wrapper::before {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  bottom: 5%;
  left: 5%;
  border: 4px solid black;
  height: 100%;
  width: 100%;
}

<div class="frame-wrapper">
  <img src="https://via.placeholder.com/200x300" alt="">
</div>

Answer 3

如果没有看到您的代码，将很难分辨出问题出在哪里。但是，请尝试将您的图片放置在自己的位置，并在div本身上应用边框。