如何用HTML和CSS实现纯圆形印章样式效果？

本文共计806个文字，预计阅读时间需要4分钟。

纯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 印章当正式输出用。