我可以使用 CSS 来扭曲边框，使它们看起来像草图吗？答案

【问题标题】：Can I use CSS to distort borders so they look like sketched?我可以使用 CSS 来扭曲边框，使它们看起来像草图吗？
【发布时间】：2023-04-03 01:10:02
【问题描述】：

我有带边框的框 (div)，我想让它看起来像草图，即边框不是直线，而是略微扭曲，就像手工绘制的一样。

插图：

这可以使用 CSS 转换或类似方法来完成吗？

【问题讨论】：

我不这么认为。我想你可以只使用一张图片。
this 帮了我

标签： css css-transforms

【解决方案1】：

hand-drawn borders 上的这篇文章给出了一个很好的例子，它通过使用大椭圆圆角（通过 CSS border-radius 属性）仅使用 CSS 实现按钮的这种效果。它可能不适用于大型 div 元素。

示例改编自文章：

button {
      background:transparent;
      padding:0.5rem 0.5rem;
      margin:0 0.5rem;
      font-size:1rem;

      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
}

button:hover{
   box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
button.lined.thick{
   border:solid 3px #41403E;
}
button.dotted.thick{
   border:dotted 3px #41403E;
}
button.dashed.thick{
  border:dashed 3px #41403E;
}
button.lined.thin{
   border:solid 2px #41403E;
}
button.dotted.thin{
   border:dotted 2px #41403E;
}
button.dashed.thin{
  border:dashed 2px #41403E;
}

<button class='lined thick'>Lined Thick</button>
<button class='dotted thick'>Dotted Thick</button>
<button class='dashed thick'>Dashed Thick</button>
<div>&nbsp;</div>
<button class='lined thin'>Lined Thin</button>
<button class='dotted thin'>Dotted Thin</button>
<button class='dashed thin'>Dashed Thin</button>

【讨论】：

我更喜欢这个答案。尽管另一个也有效，但这仅使用 css 并避免使用更适合我的用例的图像。谢谢！
这实际上是一个非常好的解决方案，并且更接近我最初寻找的解决方案。

【解决方案2】：

您可以使用CSS Border Images。

Here is an example 在 w3schools 网站上。

这是一个代码示例：

#borderimg {
    /* You can also use border-top or border-bottom to target the side you want affected */
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

【讨论】：

我觉得w3schools的解释不是很好。我可以推荐this article，它给出了非常详细的解释。而this site 提供了一个非常有用的工具，可以帮助您找到border-image-slice 和其他属性的最佳值。
@not2savvy 我知道你的意思，w3schools 有时往往很含糊。但是，嘿，我猜他们有很多事情要做。
你可能是对的。这是我的实现，仅供参考：Sketched box example（点击切换样式设置浅色背景）