css印章仅能模拟视觉效果，无法导出透明png或用于pdf/文档盖章；适合页面装饰、状态标识等轻量场景，正式电子章必须用canvas实现。
纯 CSS 实现的“印章”只能模拟视觉效果，不能生成可导出、可盖在 PDF 或文档上的真实印章图；它适合用作页面装饰、状态标识或轻量水印，但别指望它能替代 canvas 绘制的带弧形文字和五角星的正式电子章。
CSS 圆形边框 + 文字居中是最简可用方案
多数人卡在“怎么让文字垂直水平都居中”，其实只要三行关键样式：
-
border-radius: 100%确保 div 是正圆（宽高必须相等） -
display: flex; justify-content: center; align-items: center让文字真正居中，不靠line-height猜高度 -
font-family: 'SimSun', 'NSimSun', sans-serif显式指定中文字体，避免 macOS/Linux 下 fallback 成无衬线体，失去印章感
示例代码：
.seal {
width: 120px;
height: 120px;
border: 4px solid #c00;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: 'SimSun', 'NSimSun', sans-serif;
font-weight: bold;
color: #c00;
background-color: rgba(255, 255, 255, 0.9);
font-size: 14px;
}
注意：background-color 用 rgba() 而非纯白，否则在深色背景上会突兀；font-size 别设太大，12–16px 在 120px 圆内最稳。
加五角星或横线装饰时，别用 hr 标签硬塞
网上常见写法是用 <hr> 模拟印章内圈横线，但 hr 默认有 margin、语义错位、响应式下易错位。更可控的方式是用伪元素或绝对定位的 div：
- 用
::before画一条横线：content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 2px; background: #c00; transform: translate(-50%, -50%) - 五角星建议用 SVG 内联，比 canvas 简单、比 CSS clip-path 兼容性好；直接复制一个
<svg viewbox="0 0 20 20">...</svg>进去，设width="20" height="20"并居中即可 - 如果必须用纯 CSS 画五角星，
clip-path: polygon(...)在 Safari 15.4+ 才稳定，老版本会漏边
透明背景？CSS 做不到，别白费劲
这是最容易被忽略的硬伤：CSS 渲染的印章永远是“一个带样式的 HTML 元素”，它没有 alpha 通道，无法导出为透明 PNG。如果你需要把印章盖到 PDF、合同扫描件或 Word 文档里：
- 必须用
canvas+toDataURL('image/png')，且绘制前务必调用ctx.clearRect(0, 0, w, h) - 千万别信“
background: transparent就等于透明背景”——那只是让父容器透出来，不是图像本身透明 - 后端接收时，确认它要的是 base64 字符串（以
data:image/png;base64,开头），不是 DOM 节点或 CSS 样式
真要盖章，canvas 是绕不开的路；CSS 只适合做界面里的“示意性印章”，比如审核状态徽章、用户头像角标、或表单提交后的视觉反馈。别在关键业务流程里拿 CSS 印章当正式输出用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
