是什么导致此 CSS 边框切片不正确？

Question

link 在这里，我希望每个人都能在每个角落看到整个边框图像的重复：

https://floatinggatesgame.com/devlog/index.html

目前CSS非常简单：

      display: block;
      margin: 0 auto;
      max-width: 900px;
      border-image: url('border.svg');
      border-image-slice: 145px 62px;
      border-style: solid;
      border-width: 62px;

我是按照这个学习的：

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

我在这里误解了什么？

(PS。是的，我知道我的 SVG 中的拼贴设置不正确，我想在开始调整之前先看看它的外观...)

Answer 1

border-image-slice 正在寻找矢量图像 (SVG) 的百分比值，而不是用于光栅图形（jpg 等）的像素值。如果您检查您网站上的检查器，您会注意到它因此被标记为无效，因此此时您已经点击了浏览器决定对您的边框执行的任何操作。参见：https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

Represents an edge offset in pixels for raster images and coordinates for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

#devlog-post {
  display: block;
  margin: 0 auto;
  max-width: 900px;
  border-image: url('https://floatinggatesgame.com/devlog/border.svg');
  border-image-slice: 60 40;
  border-style: solid;
  border-width: 62px;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

<div id="devlog-post">
  <h2>
    Random thoughts floating through space and time</h2>
  <p>
    For some reason, the border either draws as just a black line or as small boxes in each corner... I tried to change various settings but nothing seems to help (and I want to keep the code as minimal as possible).
  </p>
</div>

是什么导致此 CSS 边框切片不正确？

What causes this CSS border to slice incorrectly?

css

border

border-image