如何在文字两边添加类似书本引号的样式？使用CSS还是图片？

在网页排版中，给引用类文字添加类似书本两侧的引号样式是很常见的需求，这种样式能快速区分正文和引用内容，提升页面的可读性。实现这种效果主要有CSS和图片两种方案，开发者可以根据项目需求选择。

使用CSS实现文字两侧引号样式

CSS实现是最推荐的方式，不需要额外加载图片资源，样式调整也更灵活，主要通过::before和::after伪元素配合content属性实现。

基础实现代码

我们可以直接使用Unicode引号字符，也可以通过自定义字符实现不同风格的引号：

/* 基础书本引号样式 */
.quote-with-css {
    position: relative;
    padding: 0 30px;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
}

/* 左侧引号 */
.quote-with-css::before {
    content: "201C"; /* 左双引号Unicode */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 32px;
    color: #999;
    line-height: 1;
}

/* 右侧引号 */
.quote-with-css::after {
    content: "201D"; /* 右双引号Unicode */
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 32px;
    color: #999;
    line-height: 1;
}

自定义引号样式

如果想要更个性化的引号，也可以替换content里的内容，比如使用中文书名号或者自定义符号：

/* 中文书名号样式 */
.quote-book-style::before {
    content: "《";
    font-size: 28px;
    color: #2c7be5;
}

.quote-book-style::after {
    content: "》";
    font-size: 28px;
    color: #2c7be5;
}

CSS实现的优缺点

• 优点：不需要加载额外图片，减少HTTP请求；样式调整方便，修改颜色、大小只需要改CSS属性；适配不同屏幕尺寸，不会出现图片模糊问题
• 缺点：复杂设计的引号（比如带纹理、特殊形状的）很难用纯CSS还原；部分老旧浏览器对伪元素的支持可能存在兼容性问题

使用图片实现文字两侧引号样式

如果设计稿中的引号样式非常复杂，无法通过CSS简单实现，就可以选择图片方案，通过背景图或者<img>标签定位实现。

背景图实现方式

把左右引号做成两张透明背景的图片，通过背景定位添加到文字两侧：

/* 图片实现引号样式 */
.quote-with-img {
    padding: 0 40px;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    background-image: url(https://ipipp.com/left-quote.png), url(https://ipipp.com/right-quote.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right bottom;
    background-size: 30px 30px;
}

img标签定位实现方式

也可以直接在HTML里插入引号图片，通过绝对定位放到对应位置：

<div class="quote-img-wrap">
    <img src="https://ipipp.com/left-quote.png" class="left-quote" alt="左引号">
    <p class="quote-text">这是一段需要添加书本引号样式的引用文字，通过图片实现两侧引号效果。</p>
    <img src="https://ipipp.com/right-quote.png" class="right-quote" alt="右引号">
</div>

.quote-img-wrap {
    position: relative;
    padding: 0 40px;
}

.quote-text {
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    margin: 0;
}

.left-quote {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
}

.right-quote {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
}

图片实现的优缺点

• 优点：可以完美还原设计稿中的复杂引号样式，不受CSS能力限制；兼容性好，所有浏览器都支持图片展示
• 缺点：需要额外加载图片资源，增加页面加载时间；调整大小、颜色需要重新制作图片，维护成本高；高分辨率屏幕下可能出现图片模糊

两种方案的选择建议

如果只是需要常规的书本引号样式，优先选择CSS实现，性能更好维护更方便。如果引号样式包含特殊纹理、渐变或者复杂形状，设计还原要求高，再选择图片方案。另外如果项目中已经使用了雪碧图或者图标字体，也可以把引号做成图标字体的形式，兼顾灵活性和性能。

CSS伪元素text_indentcontent属性引号样式修改时间：2026-06-16 22:09:26