本身无气泡样式，所谓“引用气泡”是纯 css 实现的视觉效果；需通过 position: relative + ::before/::after 伪元素 + 单边 border + border-radius + 背景色组合完成，禁用 float 和 transform: rotate()，并注意 cite 对齐、rtl、深色模式等细节适配。
HTML 中的 <blockquote></blockquote> 本身不带“气泡”样式，所谓“引用气泡”是纯 CSS 实现的视觉效果，不是 HTML 内置功能。
为什么 <blockquote></blockquote> 看起来像气泡？
浏览器默认会给 <blockquote></blockquote> 加左边界（border-left）、内边距和斜体，但这只是基础样式，离“气泡”差很远。真正实现气泡效果要靠 CSS 的 ::before/::after 伪元素 + 绝对定位 + border-radius + 背景色/边框组合。
常见错误现象：
• 直接写 <blockquote>文字</blockquote> 后发现没气泡、没箭头、没圆角
• 用 background: #f0f0f0 填满但边缘生硬，不像对话气泡
• 伪元素位置偏移，箭头悬空或贴错边
- 必须给
<blockquote></blockquote>设position: relative，否则::after箭头无法准确定位 - 气泡的“尾巴”（箭头）推荐用单边
border+ 透明三边实现，比 SVG 或图片更轻量、可缩放 - 移动端要注意
max-width和padding，否则气泡撑破容器
怎么用 CSS 给 <blockquote></blockquote> 加右下角小三角气泡
这是最常用场景：引用块右下角带一个指向文本的小三角，模拟聊天气泡风格。
blockquote {
position: relative;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px 20px 16px 40px;
margin: 1rem 0;
}
blockquote::after {
content: '';
position: absolute;
bottom: 8px;
right: 12px;
width: 0; height: 0;
border: 6px solid transparent;
border-top-color: #e0e0e0;
border-right-color: #e0e0e0;
border-bottom-color: transparent;
border-left-color: transparent;
}
blockquote::before {
content: '';
position: absolute;
bottom: 9px;
right: 13px;
width: 0; height: 0;
border: 5px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: transparent;
border-left-color: transparent;
}
关键点：
• ::after 是外层灰色边框箭头，::before 是内层白色箭头，叠加形成描边效果
• 两个箭头的 bottom/right 值要错开 1px，否则会重叠糊掉
• 不要用 transform: rotate() 画箭头——旋转后抗锯齿差，且响应式下易错位
<blockquote></blockquote> 里嵌套 <cite></cite> 怎么对齐气泡尾部？
当引用带来源（如 <cite>— 张三，《前端手记》</cite>），气泡尾巴容易和 cite 错位，尤其 cite 在右下角时。
- 把
<cite></cite>放在<blockquote></blockquote>最末，并设display: block; text-align: right; margin-top: 8px; - 气泡箭头的
bottom值需预留 cite 高度，例如 cite 行高 1.4 × 14px ≈ 20px，则箭头bottom改为28px（而非默认8px） - 更稳妥做法：用 flex 布局包裹内容与 cite，再统一控制气泡定位基准
别忽略：若 <cite></cite> 用了 font-style: normal，记得重置它，否则可能继承 blockquote 的斜体。
兼容性与性能注意点
::before/::after 气泡在 IE8+ 都支持，但 IE8 不支持 border-radius 和多色 border，圆角气泡会退化为直角；iOS Safari 旧版本对 position: absolute 在 inline 元素里的定位有偏差。
- 如果项目需支持 IE8，改用背景图（base64 编码的 PNG 箭头）替代伪元素
- 避免在
<blockquote></blockquote>上加box-shadow+ 多层伪元素 +filter: drop-shadow()，滚动时可能触发重绘卡顿 - 不要给每个
<blockquote></blockquote>都加animation: float 3s infinite—— 气泡不是浮动广告
真正难的不是画出气泡，而是让气泡在不同字号、行高、RTL 文本、深色模式下都保持位置精准、颜色协调、不遮挡文字——这些细节往往上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
