Question

我需要通过旋转图像来渲染帧（即图片周围的图片框）：

左侧0度
90为顶部
......等等。

据我所知，没有border-image-left|right|top|bottom属性，虽然这也有效 - 如果我错了，请纠正我。

我似乎需要使用border-image属性。有谁知道是否可以根据侧面旋转图像？

我猜其他杂乱的选项会包括

围绕图像创建四个div
手动生成边框图像（这不会真正起作用1.我们有超过300张图像，2。帧需要用于不同宽高比的图像......）

编辑：'取决于侧面'左侧为0度，顶部为90度，右侧为180度，底部为240度......请参见下图中的示例。

Left hand border image

Answer 1

部分强制，但将其包裹在div和span中并使用伪元素和变换进行播放似乎有效。图片包含在.img-container div和span中，::before和::after元素绝对位于图片周围。

这是标记：

<div class="img-container">
  <span>
    <img src="https://unsplash.it/300/300?image=200">
  </span>
</div>

造型：

.img-container, span, img{
  display: block;
  position: relative;
}

/* Image border general */
.img-container::before,
.img-container::after,
span::before, span::after{
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  height: 100%;
  transform: translateY(-50%);
  background-image: url("https://i.stack.imgur.com/0UI1w.png");
  background-size: 100% 100%;
  z-index: 2;
}

/* Specific to the right border */
.img-container::after{
  left: auto;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

/* Top and bottom border general */
span::before,
span::after{
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Just the bottom */
span::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(270deg);
}

可能有点多

这是fiddle

CSS边框图像：通过旋转图像渲染帧

1 个答案: