javascript - 如何用 CSS 或 JS 用矩形做 9 级

Question

我想在矩形周围有一个自定义 CSS 边框 纹理，例如手绘交叉影线。理论上，我会创建一个“9 比例”的矩形切片，因此无论它的尺寸是多少，它总是有边框。

纯粹在 CSS 中可以实现这样的事情吗？或者，如果没有，那么您如何在 JS 中完成此操作？我正在考虑使用交叉影线创建一个文本输入，它周围有一种内部阴影边界效果。想知道这是否/如何在纯 CSS 中完成，或者如果不是纯 CSS 那么在 JS 中完成。

旁注，刚刚发现border-image ，不确定这是否相关。

我想让边框看起来基本上是这样的:

Answer 1

我会为此使用 border-image。

#border-image {
  font-size: 20px;
  width:300px;
  border: 10px solid black;
  padding: 35px;
  margin: 2em;
  
  
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'  viewBox='0 0 22 22'%3E%3Cpath d='M2,5 Q2,2 5,2L17,2 Q20,2 20,5L20,17 Q20,20 17,20L5,20 Q2,20 2,17Z' stroke='red' fill='none' /%3E%3C/svg%3E");
  border-image-slice: 5;
  border-image-repeat: round;
  border-image-width: 22px;
}

}

<div id="border-image" class="bi">
</div>

对于 border-image-source 我使用的是 SVG 元素:

<svg id="svg" viewBox='0 0 22 22' width='200'>
<path d='M2,5 Q2,2 5,2L17,2 Q20,2 20,5L20,17 Q20,20 17,20L5,20 Q2,20 2,17Z' stroke='red' fill='none'  />
</svg>

如果你想使用这个 svg 元素作为背景，你可以将它编码成这样:

"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'  viewBox='0 0 22 22'%3E%3Cpath d='M2,5 Q2,2 5,2L17,2 Q20,2 20,5L20,17 Q20,20 17,20L5,20 Q2,20 2,17Z' stroke='red' fill='none' /%3E%3C/svg%3E"

为了将 svg 编码为数据 uri，您可以使用此 URL-encoder for SVG

我为 border-image-slice 使用的值是 5，因为这是圆 Angular 的大小。

在上图中，这将是 C1、C2、C3 和 C4 的大小 图片来自这篇文章:border-image

看这个例子:

svg{border:1px solid}
line{stroke:black; stroke-width:.1}

<svg id="svg" viewBox='0 0 22 22' width='200'>
<path d='M2,5 Q2,2 5,2L17,2 Q20,2 20,5L20,17 Q20,20 17,20L5,20 Q2,20 2,17Z' stroke='red' fill='none'  />
  <g id="lines1">
  <line class="h" x1="0" x2="22" y1="5" y2="5"></line>
  <line class="h" x1="0" x2="22" y1="17" y2="17"></line>

  <line class="v" x1="5" x2="5" y1="0" y2="22"></line>
  <line class="v" x1="17" x2="17" y1="0" y2="22"></line>
</g>
</svg>

我正在使用 border-image-width: 22px; 但粗略地说，您可以更改它:

请阅读更多关于 border-image 的信息