可以通过以下几种方式在 HTML 中使用 CSS3 实现手绘风格效果：
可以在 CSS 中引入手写字体，比如 Indie Flower，然后将其应用到页面中的文本元素上：
/* 引入手写字体 */
@font-face {
font-family: 'Indie Flower', cursive;
src: url('indie-flower.woff2') format('woff2'),
url('indie-flower.woff') format('woff');
}
/ 应用到文本元素 /
p {
font-family: 'Indie Flower', cursive;
font-size: 24px;
}
可以使用 CSS 中的 background-image 属性来引入手绘风格的纹理背景，比如下面的例子中使用了一张粉色的纹理背景：
body {
background-image: url('texture.jpg');
background-repeat: repeat;
}可以使用 CSS 中的 background-image 属性来引入手绘风格的图案，比如下面的例子中使用了一个手绘风格的草图图案：
body {
background-image: url('sketch.png');
background-repeat: repeat;
}可以使用 SVG 或者 CSS3 的 transform 属性来创建手绘风格的图标，比如下面的例子中创建了一个手绘风格的搜索图标：
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="none" stroke="currentColor" stroke-width="2" d="M22,22 L17,17"
stroke-linecap="round" stroke-linejoin="round" />
<circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
/ 添加手绘风格 /
svg {
transform: rotate(-10deg) scale(1.2);
}