形状的应用：shape-outside

shape-outside 使用形状值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。这将使得内联内容会环绕着形状，而不是围绕矩形环绕。

非浮动元素不能用。

可能的值：

/* 关键字值 */
shape-outside: none;   /* 默认 */
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
 
/* 形状值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
 
/* <url> 值 */
shape-outside: url(image.png);
 
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
 
/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

二、经典应用1：文字圆形环绕

有时候，需要让文字环绕图片排版。

这是常见的一种图文排版手法。CSS 中常用浮动来实现该效果。

<div class="box">
    <div class="img">
        <img src="images/4.jpg" width="300" height="300" alt="">
    </div>
    <div class="txt">
        <p>
            小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
        </p>
        <p>
            “小说”出自《庄子·外物》。
        </p>
        <p>
            人物、情节、环境是小说的三要素。情节一般包括开端、发展、....
        </p>
        <p>
            “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」....
        </p>
    </div>
    <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}
 
.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}
.box{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background: #f2f2f2;
}
.img{
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.txt{
    font-size: 16px;
    line-height: 2;
}

让图片部分浮动起来，即可实现文字环绕。  

.img{
    float: left;
    margin:30px;
}

但是如果把图片部分变成圆形，文字还是围绕“矩形”环绕的。

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
}

要实现“圆形”环绕，需要使用 CSS3 的新属性 shape-outside，规定了文字环绕的形状。

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
    shape-outside:circle();  /* 圆形环绕 */
}

三、经典应用2：任意形状环绕

同样道理，我们可以做出任意形状的文字环绕效果。

<div class="txtBox">
    <div class="img">
        <img src="images/fashion.jpg" alt="">
    </div>
    <div class="txt">
        <p>
            耀眼的金属光泽，独具匠心的外观设计，令宝诗龙的每一处都散发着不拘一格的时尚气息。
        </p>
        <p>
            个性十足的林彦俊也对宝诗龙的饰品青眼有加，在七夕时分亲自演绎了宝诗龙的不凡魅力。
 
        </p>
        <p>
            毫无疑问的，当它的光芒闪耀于脖颈和指间，你便是人群中当仁不让的视觉焦点。
        </p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
    </div>
   <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}
 
.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}
 
.txtBox{
    margin-top: 50px;
}
 
 
.txtBox{
    width: 1000px;
    height: 687px;
    background: #bda895;
    margin-right: auto;
    margin-left: auto;
}
.img{
    float: left;
    shape-outside: polygon(0 0,368px 0, 425px 226px, 463px 227px ,475px 355px,
    558px  503px ,391px  596px,  440px 687px, 0  687px);
}
.txt{
    color: #fff;
    font-size: 20px;
    line-height: 2;
    padding-top: 30px;
    padding-right: 30px;
}

形状的坐标可以用 PS 等工具，利用参考线，依次查找。

四、兼容性

shape 相关的样式兼容性还不错，除了 IE。现在也没人管 IE 了。