一、形状 Shape

形状 Shape 的出现，打破了传统 CSS 中，只有矩形形状的尴尬，可以让我们的形状多元化。

用以下结构和样式为基础案例说明：

<div class="txtBox">
   <div class="txtBox_content">
       <p>
           小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
       </p>
       <p>
           “小说”出自《庄子·外物》。
       </p>
       <p>
           人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、爱情、家庭伦理篇、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
       </p>
       <p>
           “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」庄子所谓的「小说」，是指琐碎的言论，与小说观念相差甚远。直至东汉桓谭《新论》：「小说家合残丛小语，近取譬喻，以作短书，治身理家，有可观之辞。」班固《汉书．艺文志》将「小说家」列为十家之后，其下的定义为：「小说家者流，盖出于稗官，街谈巷语，道听途说者之所造也。」才稍与小说的意义相近。而中国小说最大的特色，便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语，是一种小知小道的纪录。
       </p>
   </div>
</div>

*{  margin: 0; padding: 0;}
.txtBox{
    width: 600px;
    height: 600px;
    background: #eee;
    margin-right: auto;
    margin-left: auto;
}
.txtBox_content{
    width: 600px;
    height: 600px;
    background: #999;
}

1. 形状值

很多参考资料称之为 <basic-shape> ，我更喜欢称之为形状值，因为它就是定义了一个形状，可以作为属性值用在 clip-path 或 shape-outside 属性上。

可能的数据有：

（1）inset()

inset() 函数在形状内部指定一个矩形区域。它的参数为4个偏移值，以及可选的圆角度数。

 inset( <shape-arg>{1,4} [round <border-radius>]? )

以下都是正确的 inset() 的写法：

inset(10% 20% round 5px) 
/*一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%*/
inset(15px 20px 30px)  /* 上边距   左右边距  下边距 */
inset(25% round 10px 30px) 
inset(10px 20px 30px 40px round 10px)

比如：

.txtBox_content{
    clip-path: inset(10% 20% 10% round 10%);
}

（2）circle()

circle()函数用于定义一个圆形。

circle() = circle( [<shape-radius>]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

<shape-radius> 参数用于指定圆形的半径。半径，也可以使用两个关键字来指定：closest-side和furthest-side。

<position> 参数用于指定圆的圆心，默认是正中心。

如果不指定参数，则是 closest-side ，且默认正中心。

以下都是正确的 circle() 的写法：

circle(); 
/* 使用默认值：圆形使用closest-side作为半径，圆形位于元素的中心 */
 
circle(100px at 30% 50%); 
/* 圆形的半径为100像素，位于元素的水平30%，垂直50%的位置 */
 
circle(farthest-side at 25% 25%); 
/* 圆形的半径为最远边的一半，位于元素的水平25%，垂直25%的地方 */
 
circle(10em at 500px 300px);

比如：

.txtBox_content{
    clip-path: circle();
}

（3）ellipse()

ellipse()函数用于定义一个椭圆形。

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
/* 其中... */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

它的参数和 circle() 函数相同。

<shape-radius>参数用于指定椭圆形的半径。它可以指定2个半径值：rx 和 ry，分别代表椭圆的X轴半径和Y轴半径。

以下都是正确的 ellipse() 的写法：

ellipse() 
/* 使用默认值 */
 
ellipse(100px 50px at 30% 50%) 
/* 椭圆形的X轴半径100像素，Y轴半径50像素。圆心位于水平30%，垂直50%的地方 */
 
ellipse(farthest-side closest-side at 25% 25%) 
/* 椭圆形的X轴半径为farthest-side，Y轴半径为closest-side。圆心位于水平25%，垂直25%的地方 */
 
ellipse(10em 10em at 500px 300px) 
/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素，垂直300像素的地方 */

比如：

.txtBox_content{
    clip-path: ellipse(50% 20%);
}

（4）polygon()

polygon()函数用于定义一个多边形。

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>

polygon() 的参数是一组坐标对（<shape-arg> <shape-arg>），每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。

除了坐标对参数，polygon() 函数还可以使用一个可选的关键字 fill-rule 。该关键字指定如何处理可能相交的多边形形状的区域。可取值有nonzero和evenodd。默认值为nonzero。

下面都是有效的polygon()函数声明。

polygon(0 0, 100% 100%, 0 100%)
polygon(0 0, 100% 100%, 0 100%)
polygon(50px 0px, 100px 100px, 0px 100px)
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px )

比如：

.txtBox_content{
    clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
}

2. 形状的应用：clip-path

clip-path ，裁剪属性，用于指定使用一个形状值、内联或外部的 SVG 路径作为剪裁路径对元素进行裁剪。

裁剪区域内的内容将会显示，而不在这个区域内的内容不会显示。

裁剪的元素可以是任何容器和图片元素。

/* SVG中的clipPath的使用 */ 
.element { 
    clip-path: url(#svgClipPathID); 
} 
/* 使用CSS中的基本图形函数 */ 
.element { 
    clip-path: polygon(...); 
}
/* 或者其他的图形函数 */

基本形状在 clip-path 的使用见前面的案例。

这里举例说明下 SVG 的使用。

<svg height="0" width="0">
    <defs>
        <clipPath id="svgTextPath">
            <text x="0" y="300" textLength="600px" lengthAdjust="spacing" font-family="Vollkorn" font-size="100px" font-weight="700" font-style="italic">
                White Mouse
            </text>
        </clipPath>
    </defs>
</svg>

.txtBox_content{
    clip-path: url(#svgTextPath);
}

3. 形状的应用：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;
}