常规情况下我们做文字环绕效果，文字通常只能围绕在图片的周围，而且文字的位置是固定的，这样的效果明显很僵硬，而且不够灵活，今天我们就来自定义一个文字浮动区域，让文字动起来，效果更加棒。
先看效果：
文字环绕
我们先来看一下文字环绕的效果，先上代码：
<div class="wrap"> <img src="#" alt=""> <p> 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 这里有一大堆文字 </p> </div> <style> .wrap { width: 300px; } .wrap img { width: 100px; height: 100px; float: left; } </style>
这样就得到了下面的效果：
可以看到的是，文字环绕在图片的周围，这个就是文字环绕的效果，但是这个效果不是很好，能不能让文字环绕到图片的任意位置呢？答案是可以的，下面我们就来实现这个效果。
shape-outside
在实现这个效果之前我们先来认识一个属性shape-outside，这个属性可以让元素的外形围绕在指定的形状之外；
我们先来看一下shape-outside的属性介绍：
shape-outside用来指定一个元素的外形围绕在指定的形状之外，这个形状可以是一个基本形状，也可以是一个图片，也可以是一个盒子，也可以是一个渐变。
shape-outside = none | [ <basic-shape> || <shape-box> ] | <image> <shape-box> = <box> | margin-box <image> = <url> | <gradient> <box> = border-box | padding-box | content-box <url> = url( <string> <url-modifier>* ) | src( <string> <url-modifier>* )
这些都是啥呀，看不懂，不想看，我就想用，那就直接上代码：
.wrap img { width: 100px; height: 100px; shape-outside: circle(25px at 50px 50px); float: left; }
可以看到文字环绕到图片里面了，这个效果没啥可以说的，我们来看看代码做了什么；
就是加了一行shape-outside: circle(25px at 50px 50px);，这个就是应用到circle这个基本形状，25px是半径，50px 50px是圆心的位置，这样就实现了文字环绕到图片里面的效果。
上面使用的circle函数就是一个<basic-shape>；
<basic-shape>是基本形状，包括circle、ellipse、inset、polygon；
对于这些不是很熟悉没关系，了解即可：
circle：圆形ellipse：椭圆形inset：内嵌polygon：多边形
也就是说文字环绕可以使用这些基本形状，我们直接来看一下多边形的效果：
.wrap img { width: 100px; height: 100px; shape-outside: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background-color: #ccc; float: left; }
可以看到文字环绕成一个五角星的效果，为了显示效果我加上了clip-path属性，这个属性可以裁剪元素的形状，这样就可以更加清晰的看到效果。
<shape-box>是指定一个盒子，这个盒子可以是border-box、padding-box、content-box；
这个属性值可以通过box-sizing属性来理解，box-sizing属性可以设置元素的盒模型，有两个值：
content-box：默认值，元素的宽高只包含内容的宽高border-box：元素的宽高包含内容的宽高和内边距和边框的宽高
而它多了一个属性值为padding-box，意思就是围绕着这个盒子的内边距来围绕；
我们来看一下padding-box的效果：
.wrap img { width: 100px; height: 100px; shape-outside: padding-box; border: 10px solid #ccc; padding: 10px; background-color: #ccc; float: left; }
可以看到文字环绕在图片的内边距里面，这个效果应该很少有人会用到，但是这个属性值还是可以了解一下的。
<image>是指定一个图片，这个图片可以是一个url，也可以是一个gradient；
这个就非常有趣了，如果我们用图片来做文字环绕的效果，这里我没有准备图片，所以直接用渐变来做演示，如果你有图片可以直接用图片来做演示；
图片的效果就是计算图片的透明的地方，然后文字环绕在图片的透明的地方；
而渐变也是同理，透明的地方会被文字填充，如下：
.wrap img { width: 100px; height: 100px; shape-outside: repeating-linear-gradient(-45deg, transparent, transparent 2em, #ccc 2em, #ccc 4em); background-image: repeating-linear-gradient(-45deg, transparent, transparent 2em, #ccc 2em, #ccc 4em); float: left; }
可以看到的是文字环绕在渐变的透明的地方，这个效果也是非常有趣的，但是遗憾的是并不能见缝插针，而是只会环绕在元素的四周，但是也是可以做很多有趣的效果的，例如：
.wrap img { width: 300px; height: 300px; shape-outside: repeating-linear-gradient(#ccc, #ccc 1em, transparent 1em, transparent 2.5em); background-image: repeating-linear-gradient(aquamarine, aquamarine 1em, transparent 1em, transparent 2.5em), repeating-linear-gradient(90deg, rosybrown, rosybrown 1em, transparent 1em, transparent 2em); line-height: 2em; float: left; }
一格一格的文字效果也是可以的，让人感觉到非常有趣。
总结
这篇文章主要介绍了shape-outside属性，这个属性可以让文字环绕在元素的周围，这个属性值可以是<basic-shape>、<shape-box>、<image>，这个属性值可以让我们做很多有趣的效果；
这篇文章只是简单的介绍了一下shape-outside属性，如果你想了解更多的话，可以参考MDN。
