css中文字环绕图片怎么设置

CSS中文字环绕图片是一种常见的页面排版方式。实现文字环绕图片的方法有很多，本文将介绍其中一种实现方式。
首先，在HTML页面中添加一张图片和一段文字。图片可以使用img标签，文字可以使用p标签。如下所示：

<img src="example.jpg" alt="示例图片">
<p>这是一段文字，用于测试文字环绕图片的效果。</p> 

接着，在CSS样式表中设置图片的样式。我们要让图片固定在页面的左侧，并使文字环绕图片。这可以通过以下CSS代码实现：

img {
    float: left;
    margin-right: 10px;
    shape-outside: circle(50%);
    clip-path: circle(50%);
}
p {
    text-align: justify;
} 

CSS代码的要点解释如下：
1. 使用float属性将图片向左浮动。
2. 使用margin-right属性为图片留出一定的空间。
3. 使用shape-outside和clip-path属性，将图片剪裁成一个圆形，并使文章文字环绕圆形图片。这需要浏览器支持CSS Shapes，若浏览器不支持则图片不会被剪裁成圆形，但文字仍会环绕在图片周围。
4. 使用text-align属性让文章文字两端对齐，以增强排版效果。
最后，将HTML页面和CSS样式表关联起来即可看到效果。
本文介绍的方法可以用于实现多种形状的图片环绕排版，只需要将shape-outside和clip-path属性中的形状改为需要的形状即可。值得注意的是，不同浏览器对CSS Shapes的支持程度不同，使用前需要进行相应的兼容性测试和处理。