[分享]css3图文混排

CSS3的出现不仅让我们在样式方面有了更多的选择，而且在图文混排方面，我们也可以运用CSS3的一些特效来增加网页的美观程度。下面我们来看一些常见的CSS3图文混排实现方法。/ 图片环绕文字 / .im...

CSS3的出现不仅让我们在样式方面有了更多的选择，而且在图文混排方面，我们也可以运用CSS3的一些特效来增加网页的美观程度。下面我们来看一些常见的CSS3图文混排实现方法。

/* 图片环绕文字 */
.img-wrap {
   float: left;
   margin-right: 10px;
}
.text-wrap {
   overflow: hidden;
}
.img-wrap img {
   border-radius: 50%;
}
.text-wrap p {
   margin: 0;
} 

这段代码实现了图片环绕文字的效果，其中使用了float属性来让图片靠左浮动，利用margin-right留白，避免文字和图片之间难以看清。

/* 图片阴影效果 */
img {
   box-shadow: 3px 3px 5px #888888;
} 

这段代码则通过box-shadow属性实现图片阴影效果，这样不仅可以增加图片的立体感，更能突出图片本身。

/* 文字背景色 */
p {
   background-color: #bfbfbf;
   color: #ffffff;
} 

通过设置background-color属性和color属性，我们可以实现文字背景色效果。这样不仅能提高文字的可读性，也能增加网页的整体美观度。

以上只是CSS3图文混排的一些常见实现方法，大家在实际使用中还可以根据实际情况适当调整，发挥想象力创造更多美丽的效果。