一、形状 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);
}
</div>
