papercss手绘边框糊掉是因filter: blur(0.2px)在高dpi或非100%缩放下过度扩散，需重置filter并按scale比例调整；paper-button无反馈因漏引paper-styles.css；paper-card忽略max-width因缺box-sizing: border-box；构建工具中@import失效需改用全量css引入或配置sass路径。
为什么 PaperCSS 的手绘边框在现代浏览器里看起来像糊掉的铅笔线
因为默认启用了 filter: blur(0.2px) 模拟手绘抖动，但高 DPI 屏幕或缩放比例 ≠ 100% 时，这个模糊会过度扩散，变成毛边。不是 CSS 写错了，是像素对齐失效了。
- 临时关闭：给根元素加
filter: none !important快速验证是否是它导致的 - 更稳妥的做法：重置所有
.paper相关 class 的filter，只在需要手绘感的局部元素上手动加filter: blur(0.1px) - 注意
transform: scale()会放大模糊效果，如果用了响应式缩放，blur 值得按比例下调（比如scale(1.2)时，blur 改成0.08px）
paper-button 点击无反馈？检查你有没有漏掉 paper-styles.css
PaperCSS 的交互样式（如按钮按压变色、输入框聚焦边框）不包含在主 paper.css 里，全在独立的 paper-styles.css 中。只引入主文件，按钮就是“静态摆设”。
- 必须同时加载两个文件：
<link rel="stylesheet" href="paper.css">和<link rel="stylesheet" href="paper-styles.css"> - 顺序不能错：
paper-styles.css必须在paper.css之后引入，否则覆盖失效 - 如果你用的是 npm 安装的
@paper-css/paper-css，paper-styles.css在dist/目录下，不是同级
用 paper-card 做响应式布局时，max-width 被忽略的真相
PaperCSS 给 .paper-card 设了 width: 100%，但没设 box-sizing: border-box —— 当你加了 padding 或 border，实际宽度就超出了 max-width。
- 直接补一句：
.paper-card { box-sizing: border-box; } - 别依赖
paper-grid做复杂响应式：它的列宽是固定百分比 + 固定 margin，不支持gap或minmax()，真要自适应，建议用原生display: grid，只借用PaperCSS的字体和颜色变量 - 如果卡片里嵌了
<img alt="CSS框架PaperCSS应用_打造独特的“纸张”手绘风格" >，记得加img { max-width: 100%; height: auto; }，否则手绘边框会被撑破
Webpack 或 Vite 项目里，@import 加载 PaperCSS 后样式丢失
因为 PaperCSS 的源码（Sass 版本）里用了 @import "variables" 这类相对路径，而构建工具默认不识别 node_modules 下的 Sass partials，报错可能静默，只丢样式。
立即学习“前端免费学习笔记（深入）”；
- 推荐放弃
@import，改用 CSS 全量引入：@import 'node_modules/@paper-css/paper-css/dist/paper.css'; - 如果非要用 Sass 变量（比如想改
$primary-color），得配 Sass 的includePaths，把node_modules/@paper-css/paper-css/scss/加进去 - Vite 用户注意：
vite-plugin-sass默认不开启additionalData，变量注入得手动配，不然$font-family-paper这类变量根本不可用
手绘风格的代价是细节更敏感——边框模糊值、box-sizing、构建路径，三者任一出偏差，纸张就变皱纸。调的时候别只看“像不像”，先看控制台有没有 failed to load resource 或 computed style 里 filter 值是不是被覆盖了。
