如何创建边框偏移？

Question

嗨我想知道如何从div中偏移边框，如图像：

因此灰色边框与图像的大小相同，只是偏移到右上角。这是我的标记：

Dim Prop As Microsoft.Office.Core.DocumentProperty
Dim oBuiltInProperties As Microsoft.Office.Core.DocumentProperties
Dim oCustomProperties As Microsoft.Office.Core.DocumentProperties

oBuiltInProperties = DirectCast(Globals.DocSelect.Application.ActiveDocument.BuiltInDocumentProperties, Microsoft.Office.Core.DocumentProperties)
oCustomProperties = DirectCast(Globals.DocSelect.Application.ActiveDocument.CustomDocumentProperties, Microsoft.Office.Core.DocumentProperties)

For Each Prop In oBuiltInProperties
    'do stuff
    Prop.Name = sx
    sy=Prop.Value.ToString
next

'create properties
sx="New Property"
sy="New Property Value"
oCustomProperties.Add(sx, False, Microsoft.Office.Core.MsoDocProperties.msoPropertyTypeString, sy)

Answer 1

使用伪元素非常简单。

实施例

＆＃13;

＆＃13;

div {
  position: relative;
  margin: 50px 0 0 50px;
  display: inline-block;
}
img {
  display: block;
}
div::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid gray;
  left: 30px;
  top: -30px;
  z-index: -1;
}

＆＃13;

<div>
  <img src="http://placehold.it/350x150" alt="">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:before或:after伪类

执行此操作

figure {
  margin-top: 20px;
  display: inline-block;
}

.image {
  position: relative;      
}

figcaption {
  text-align: center;  
}

.image:before {
  content: "";
  border: 1px solid #CCCCCC;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -20px;
  right: -20px;
  z-index: -5;
}

<figure>
  <div class="image">
    <img width="400px" height="250px" src="http://www.moneywehave.com/wp-content/uploads/2015/11/know-about-money.jpg">
  </div>
  <figcaption>
    <p>
      Praesent at luctus erat, non finibus justo. 
      <a href="#">share</a>
    </p>
  </figcaption>
</figure><!-- End figure.col-md-10 -->

Answer 3

这也可以通过box-shadow完成。

请注意，此效果仅在页面背景为纯色时可用，因为白色填充通过遮罩灰色阴影来创建效果。如果身体背景是图像或平铺，那么这种效果将不合适。感谢@ Mi-Creativity指出这一点。

img {width: 200px; height: 100px; background: red;} /*example "image"*/

img {
  box-shadow: 1em 1em 0 0 white, 1em 1em 0 5px gray;
}

<img />