[分享]css切开图片做一个边框

在网页设计中，很多时候需要给图片添加边框来增强其视觉效果。我们可以使用 CSS 来实现这一操作。这篇文章将向你展示如何使用 CSS 切开图片并添加边框。 我们首先要在 HTML 中创建一个包含图片...

在网页设计中，很多时候需要给图片添加边框来增强其视觉效果。我们可以使用 CSS 来实现这一操作。这篇文章将向你展示如何使用 CSS 切开图片并添加边框。

<div class="border-demo">
  <img src="example.jpg" alt="示例图片">
</div> 

我们首先要在 HTML 中创建一个包含图片的容器（div 元素），并在其中嵌套一个 img 元素。这里我们给容器添加了一个 class 名称为 border-demo，这样在 CSS 中方便进行样式选择。

.border-demo {
  position: relative;
  display: inline-block;
}
.border-demo img {
  display: block;
  width: 100%;
  height: auto;
}
.border-demo:before,
.border-demo:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  z-index: -1;
}
.border-demo:before {
  transform: rotate(5deg);
}
.border-demo:after {
  transform: rotate(-5deg);
} 

接下来，我们在 CSS 中为容器和图片添加样式。首先我们将容器设为 position: relative，这样子元素设置绝对定位后将相对于其定位。然后，我们给图片设为 display: block 以及将其宽度设为 100%。这样能够使得它在容器中占据全部空间并将其高度自适应。

接下来就是切开图片并添加边框的关键部分。我们使用伪元素 :before 和 :after 来创建两个旋转的矩形，它们将形成图片的边框。因为它们是在容器上设置的，所以它们也会随着容器的大小变化而变化。

要让这两个伪元素切开图片，我们将它们的宽度和高度设为 100%，用类似于 border 的方式设置边框，并将它们设置在容器的底层（z-index: -1）。最后，为了让整个效果看起来更加自然，我们在 :before 中将旋转角度设为 5 度，在 :after 中将其设为 -5 度。

在浏览器中查看效果，你会发现你已经切开了图片并为其添加了一个简单而漂亮的边框。