自定义边框页面

Question

我需要自定义 HTML 页面的边框。

我真的需要学习如何给这种风格加边框：

如何开始寻找和研究这些样式边框的自定义？例如，有没有我可以购买 html/css 代码的此类服务？

这种边框样式的名称是什么？

Answer 1

我会看看 CSS 属性 "border-image" 和这篇文章。可能会让你更接近你的目标。 https://css-tricks.com/almanac/properties/b/border-image/

Answer 2

我知道这是关闭的，但也许这对其他人有用。

您可以将带有边框设计的图像设置为背景。

或者，您可以创建自己的自定义边框！

.border {
  border: 1px solid black;
  height: 93vh; /* set to height of page */
}

.corner {
  background-image: url('https://i.pinimg.com/originals/10/9c/57/109c57355958d296033ee8577491c006.jpg');
  background-repeat: none;
  background-size: contain;
  height: 100px;
  width: 100px;
  border: none;
  position: absolute;
}

.corner.bottom-right {
  transform: scaleX(-1);
  bottom: 0;
  right: 0;
}

.corner.bottom-left {
  bottom: 0;
  left: 0;
}

.corner.top-right {
  transform: scale(-1, -1);
  top: 0;
  right: 0;
}

.corner.top-left {
  transform: scale(1, -1);
  top: 0;
  left: 0;
}

<div class="page">
  <div class="border">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"> </div>
    <div class="corner bottom-right"></div>>
  </div>
</div>

参见fiddle：JSFiddle

此解决方案的作用：

用.border设置整个页面的边框，您可以在此处更改颜色、宽度等
在 .corner 下的 background-image 中设置一个角图像，这应该只是我们将旋转以适合的边框的一个角，看起来像这样：Image Corner Example
将角图的位置设置为absolute，所以它会准确出现在我们指定的位置，在这种情况下，在每个角中，角图的大小也设置在.corner
作为 class 标签的一部分，每张图片都有一个独特的位置标签，这些标签的格式是 bottom-right 并指示它们在页面上的位置
通过 class bottom-right 指定位置是使用这些相应的标签 bottom: 0; right: 0; 完成的，这些标签对应于我们希望它在页面上的位置
使用此标签 transform: scaleX(-1) 指示我们希望图像朝向的方向，在此处阅读有关转换的更多信息：Transform

我希望这对某人有用！ :)

自定义边框页面

Customizing Border Page

html

css

border