[分享]css3文字包围图片

CSS3是目前比较流行的网页样式设计语言之一，它可以实现很多样式效果，其中就包括将文字环绕在图片周围的效果。下面我们就来详细介绍一下如何使用CSS3实现该效果。首先，在HTML中插入一张图片以及需要环...

CSS3是目前比较流行的网页样式设计语言之一，它可以实现很多样式效果，其中就包括将文字环绕在图片周围的效果。下面我们就来详细介绍一下如何使用CSS3实现该效果。

首先，在HTML中插入一张图片以及需要环绕该图片的文本，如下所示：

<img src="image.png" alt="图片">
<p>这里是需要环绕图片的文本</p> 

接下来，在CSS中设置图片浮动、设置文本对齐方式、设置文本宽度等属性，代码如下：

img {
    float: left;
    margin: 0 20px 20px 0;
    /*设置图片浮动和外边距*/
}
p {
    text-align: justify;
    /*设置文本对齐方式为两端对齐*/
    width: 60%;
    /*设置文本宽度为60%*/
} 

这样就可以实现将文本环绕在图片周围的效果了。当然，还可以通过其他一些CSS属性来对环绕效果进行调整，比如设置图片圆角、设置文字距离图片的间距等。

总的来说，使用CSS3实现文字环绕图片效果是比较简单的，只需要几行CSS代码就可以轻松实现。希望本文对大家有所帮助，谢谢！