使用 CSS 美化 Blockquote

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

betterblockquotes.gif

Blockquote 是 HTML 元素,用于指示文本的特定部分是从另一个网站或其他来源获取的。不同的浏览器对 blockquote 具有不同的内置样式,通常只是一个简单的左缩进。如果您像博主一样经常使用引用,那么最好控制此元素并为其添加一些 CSS 样式!

一种流行的技术是在 blockquote 区域的左上方和右下方放置大型图形引号。在这些 CSS3 之前、不支持多背景的时代,如果没有一些额外的 HTML,就没有好的方法来做到这一点。最简单的方法是在 <blockquote> 元素旁边添加一个 <span> 元素。这不是理想的方法,但它有效。您可以在 CSS 中应用 blockquote 元素的大部分样式,然后使用 span 设置第二个背景图像。分别为左上方和右下方。

我创建了一个示例页面,其中包含 5 个不同的示例,展示了您可以使用 blockquote 做的一些简单的事情。

[实时示例]

[下载示例]