用CSS将文本包裹在曲线上

重要的提示 (Important Note)

This technique has been superseded, to some degree, by the CSS Shapes proposal. While the CSS Shapes spec is not yet supported everywhere, the Adobe development team promoting it have produced a polyfill that replicates the Shapes behaviour in all modern browsers. You can read how to use CSS Shapes to wrap text around a curved image elsewhere on this blog. I’ve left this article in place for archival purposes, and for those who wish to take an alternative approach.

CSS Shapes提案已在某种程度上取代了此技术。 尽管CSS Shapes规范尚未在任何地方得到支持，但促进它的Adobe开发团队已经产生了一个polyfill，它可以在所有现代浏览器中复制Shapes的行为。 您可以在此博客的其他地方阅读如何使用CSS Shapes将文本环绕在弯曲的图像上。 我将本文留在原处是出于存档的目的，也适合那些希望采用替代方法的人。

Every bitmap image on the web is rectangular, no matter what appears in the image, so text wraps around a floated image box in the same way every time. Using a few tricks and a bit of work in PhotoShop, there is a way to create the appearence that web page text is wrapped around a curved shape.

网页上的每个位图图像都是矩形的，无论图像中显示的是什么，因此文本每次都以相同的方式环绕浮动的图像框。 使用PhotoShop中的一些技巧和一些工作，可以创建一种使网页文本环绕弯曲形状的外观。

第一步：找到您的图片 (Step One: Find Your Image)

Ideally the image used for this technique has the same background as your web page, or is transparent against it. For this exercise I am using this bust of Demosthenes, masked and edited in PhotoShop.

理想情况下，用于此技术的图像与您的网页具有相同的背景，或者是透明的。 在本练习中，我使用的是Demosthenes的半身像，在PhotoShop中进行了蒙版和编辑。

第二步：将您的图像分为水平切片 (Step Two: Divide Your Image Up Into Horizontal Slices)