PaperCSS实用工具类大全：快速构建个性化布局

PaperCSS是一个非正式的CSS框架，专门为那些希望在网页设计中添加手绘风格和个性化布局的开发者而设计。这个轻量级框架提供了一系列强大的实用工具类，让你能够快速创建独特的视觉效果和灵活的响应式布局。

🔧 边框工具类：轻松定义元素轮廓

PaperCSS提供了丰富的边框工具类，让你能够快速为元素添加不同样式的边框。从基础边框到彩色边框，应有尽有！

主要边框类：

• .border - 基础边框样式
• .border-dotted - 点状边框
• .border-dashed - 虚线边框
• .border-thick - 加粗边框
• .border-primary - 主色调边框
• .border-white - 白色边框

🎨 颜色工具类：丰富视觉层次

颜色工具类让元素配色变得简单直观。通过预定义的颜色类名，你可以快速为文本、背景和边框应用统一的配色方案。

📐 间距工具类：精确控制布局

间距工具类提供了系统化的内外边距控制，帮助你创建平衡和谐的页面布局。无论是元素间的距离还是内容与边界的间距，都能轻松调节。

🌙 深色模式支持：提升用户体验

PaperCSS内置了深色模式支持，让你的网站在不同主题下都能保持美观。通过简单的类名切换，就能实现主题的平滑过渡。

📱 响应式布局工具：适配所有设备

框架提供了完整的响应式网格系统，包括：

• .row 和 .col 基础布局
• .flex-center 居中布局
• .flex-right 右对齐布局
• .flex-spaces 等间距布局

💡 阴影效果工具：增强立体感

阴影工具类为元素添加了逼真的投影效果：

• .shadow - 标准阴影
• .shadow-large - 大阴影
• .shadow-small - 小阴影
• .shadow-hover - 悬停阴影效果

实用工具源码位置：

• 边框工具：src/utilities/_borders.scss
• 阴影工具：src/utilities/_shadows.scss
• 布局工具：src/layout/_flexbox.scss

使用PaperCSS的实用工具类，你可以像搭积木一样快速构建个性化的网页布局，无需编写大量自定义CSS代码。这些工具类设计直观、使用简单，即使是CSS新手也能轻松上手！