但是当设置了盒子的背景色后，你会发现和预期的效果不同，效果如下：
在上图中我们看到背景色被应用到盒模型范围，而不是我们预想的圆形内。
那么，我们应该怎样设置圆形的背景色呢？这就引出了一个新的CSS样式： clip-path 。clip-path 用于限制当前样式的作用范围。在下面的例子中你将看到它的使用方法。
提醒
现在，shape-outside 属性只作用域浮动的元素，并且仅限制于在块级元素上应用。使用这些属性定义的元素，其周围的文本将依赖于图形形状排布。未来的CSS 形状将不仅仅限制与应用于浮动元素上，我们将不仅仅可以在文本外部的图形上做文章，完全可以在其内部定义自定义图形，实现如下效果：
实例-使用shape-outside 创建环绕于自定义形状的浮动文本
我们从一个简单的例子开始。在实例中我们将创建一个自定义图形，并且内置文本流，最终效果图如下（文章末尾提供实例下载链接）：
例子中我们拥有两个容器，用于设置自定义形状和嵌套文本内容。代码如下：
CSS Code复制内容到剪贴板
<div class="container">
<div class="shaped"></div>
<div class="content">
<h1><span>La</span> Tour <br/>Eiffel</h1>
<p>Lorem Ipsum…..</p>
</div>
</div>
首先我们需要声明浮动区域的DIV节点，并且使用固定值设置大小。代码如下：
CSS Code复制内容到剪贴板
.container{
overflow:hidden;
height: 100vh;
width: 100vw;
}
.shaped{
float:left;
height:100vh;
width:40vw;
float:rightright;
background: black url（../images/eiffel.jpg） center top no-repeat;
background-size:cover;
}
现在坐标系已经创建成功，接下来我们将要绘制图形了。可以通过两种方式来绘制图形：
使用polygon（）
