CSS Shapes实现元素滚动自动环绕

浏览器支持

目前只有Webkit Nightly和Chrome Canary支持CSS Shape，但是它的Model Level 1已经是Candidate Recommendation（候选推荐）了，因此在规范中定义的属性和语法已经很稳定了。看来要不了多久其他浏览器也会实现CSS Shape。本Level的规范主要聚焦在几个Shape属性，这些属性主要规定了形状周围的内容该如何环绕。更具体地说，它主要聚焦在形状外围属性和其相关的属性。

如果正使用Chrome浏览器（非Canary版本），可以粘贴以下代码到地址栏：用来开启这个css的功能。

    chrome://flags/#enable-experimental-web-platform-features

看到效果但是其他浏览器还是不支持的。

使用：

element{

 shape-outside/shape-inside:形状( 参数)

}

shape-outside 限制图像周围的内容   shape-inside限制图片内部的内容

形状可选参数：circle圆形  ellipse椭圆  polygon 多边形  inset创建一个圆角矩形，文字环绕在圆角周围

参数：可以是一组坐标是由它组成那个形状的。

circle() = circle( [<shape-radius>]? [at <position>]? )
  

  比如：shape-inside: circle(250px at 500px 300px);  圆形的中心在水平500垂直300的地方，圆的半径是250px

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )两个参数，一个是x轴和y轴的半径，另一个是中心位置

inset() = inset( offset{1,4} [round <border-radius>]? ) 四个值是box边缘向内的值top right bottom left，还一个参数是半径

shape-outside: inset(1% round 5px 10px 5px 5px);代表图像距离文本是1%。他的边框圆角分明是5  10  5  5 

要让这行CSS生效，必须满足两个条件：

• 元素必须是浮动的。新版的CSS Shape可以循序我们定义一个非浮动元素的形状，但是现在还不行；
• 元素必须有确定的尺寸。元素的宽度和高度被用来建立这个元素上的坐标系统。

如果我们希望图片是个圆形，文字绕着圆

效果图：

img{

    float:left;     //浮动

    shape-outside:circle();

    width:350px;  //确定的尺寸

    height:350px;

    border-radius:50%;

}

但是我们猜想是不是只用用border-radius:50%可以让图像变成圆形然后大概就可以实现这个效果吧？？？但是他只是把图形变成圆形，但是整体的边框他还是矩形的。因此最终外框还是文字会绕矩形。

是这个效果：

不过这种效果也恰好是不支持这个属性的浏览器所呈现的效果。