1、shape-path 介绍
原理：
clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。clip-path没有被主流的浏览器支持，现代浏览器中需要使用-webkit-前缀。
取值：
（1）使用polygon定义多边形；Polygon: polygon(x-axis y-axis, x-axis y-axis, … )
使用polygon来创建一个图形，并通过多对用逗号（,）分开的X值和Y值定义了一个 路径。
（2）使用geometry-box来裁剪元素；
geometry-box一共有7个值，分别是margin-box, border-box, padding-box, content-box, fill, stroke, view-box等
（3）使用circle 来定义圆形；Circle: circle(radius at x-axis y-axis)
at关键字和前面两个值分开
（4）使用ellipse 来定义椭圆形；Ellipse: ellipse(x-rad y-rad at x-axis y-axis)
（5）Inset使用四个值（对应“上 右 下 左”的顺序）来设置圆角半径；Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)
2、clip-outside介绍
原理：
shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域， 让文字能排列在这些被裁剪区域之内。
取值：
（1）<shape-box>——如果指定这些值之一：margin-box，border-box，padding-box 或content-box，该形状则基于这些值进行计算。这个形状根据这些浮动元素的边缘计 算出浮动的区域，包括由border-radius属性制造出来的弧度，类似于background-clip
（2）ellipse()或circle()类型，且它们的半径都未使用closest-side或最远端的关键字， 则在形状函数中的每个值之间进行插值
（3）inset()类型，则在形状函数中的每个值之间进行插值
（4）polygon()类型，且两个多边形都具有相同的顶点数，并使用相同<fill-rule>，那 么在形状函数中的每个值之间插值
（5）image 提取并且计算指定 image的alpha通道得出浮动区域（译者：即根据图 片的非透明区域进行包裹）。就跟通过 shape-image-threshold来定义一样。
3、图文混排实例
1、clip-path: circle(50% at 50% 50%); 转换为 clip-path: circle(50% at 20% 20%);
实现圆心的移动
50%设置的是圆的半径，基于父元素的半径；
2、shape-outside: circle(50% at 50% 50%);
设置的是元素容器的形状，对裁剪掉其几何图形之外周围的区域，让文字能排 列在这些被裁剪区域之内。圆的半径相对于自身的50%，圆的原点在50%，50% 的位置。
下面是属性的实践应用：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> *{ margin: 0;padding: 0; } .left { width: 250px; height: 250px; /*background-color: brown;*/ shape-outside: circle(50% at 20%); clip-path: circle(50% at 20%); /*border-radius: 50%;*/ float: left; margin-right: 20px; background-image: url(quyuan.jpg); background-size: cover; } .a1{ width: 500px; margin:50px auto; border: 7px solid darkgreen; /*display: inline-block;*/ } </style> </head> <body> <div class="a1"> <div class="left"> </div> <p> 帝高阳之苗裔兮，朕皇考曰伯庸。<br/> 摄提贞于孟陬兮，惟庚寅吾以降。<br/> 皇览揆余初度兮，肇锡余以嘉名。<br/> 名余曰正则兮，字余曰灵均。<br/> 纷吾既有此内美兮，又重之以修能。<br/> 扈江离与辟芷兮，纫秋兰以为佩。<br/> 汨余若将不及兮，恐年岁之不吾与。<br/> 朝搴阰之木兰兮，夕揽洲之宿莽。<br/> 日月忽其不淹兮，春与秋其代序。<br/> 唯草木之零落兮，恐美人之迟暮。<br/> 不抚壮而弃秽兮，何不改乎此度？<br/> 乘骐骥以驰骋兮，来吾道夫先路！<br/> </p> </div> </body> </html>
