定位偏移div /图像

Question

我想获得这个结果（参见下图示例）。

首先，我尝试使用CSS创建局部边框（使用div:after）。问题：我有几张格式不同的图像，但不能正常工作。因此，我尝试使用position: relative的背景div和position: absolute中的图像。

它可以工作，但是在响应模式下不容易处理。我需要为包含图像的div设置一个with和一个高度，有时容器太大。

.container-image-border {
  margin-top: 40px;
  background-color: #fd9220;
  position: relative;
  width: 150px;
  height: 250px;
}

.container-image-border img {
  position: absolute;
  top: -30px;
  right: -30px;
}

<div class="container-image-border">

  <img alt="example" src="https://via.placeholder.com/150x250">

</div>

还有另一种方法可以实现这一目标吗？

Answer 1

.container-image-border {
  margin-top: 40px;
  position: relative;
  width: 150px;
  height: 250px;
  box-shadow: -10px 10px 0 0 #fd9220;
}

<div class="container-image-border">

  <img alt="example" src="https://via.placeholder.com/150x250">

</div>

Answer 2

您甚至不需要用<img>来包装<div>元素：使用box-shadow可以达到目的：

img {
  box-shadow: -10px 10px 0 0 #fd9220;
  margin: 20px;
}

<img alt="example" src="https://via.placeholder.com/150x250">
<img alt="example" src="https://via.placeholder.com/250x150">
<img alt="example" src="https://via.placeholder.com/150x150">

使用<div>包装的问题在于，默认情况下它是一个块级元素，并且宽度为100%，除非另有说明。由于图像的大小不确定，因此很难将其“收缩”包裹在<img>元素周围。

Answer 3

盒子阴影怎么样？

img {
  background-color: grey;
  box-shadow: -30px 30px 0 0 orange;
  margin-left: 40px; /* just for the presentation */
}

  <img alt="example" src="https://placehold.it/150x250">

Answer 4

Sub FillDownRowsRandomly()
ActiveSheet.Range("A2:O7").ClearContents
Dim i As Long
For i = 1 To 15 'iterate the columns

    Do Until Application.CountIf(ActiveSheet.Cells(2, i).Resize(6), ActiveSheet.Cells(1, i).Value) >= 4
        Dim j As Long
        j = Application.RandBetween(2, 7)
        ActiveSheet.Cells(j, i).Value = ActiveSheet.Cells(1, i).Value
    Loop
Next i


End Sub

img {
  box-shadow: -10px 10px 0 0 #fd9220;
  margin: 20px;
}