css shapes允许我们通过定义文本内容可以流动的几何形状，图像和渐变来制作有趣且独特的布局。在本教程中学习如何使用它们。
在引入css shapes之前，几乎不可能设计出具有自由流动文本的杂志式布局。相反，网页设计布局传统上采用网格，方框和直线形状。
css shapes允许我们定义文本可以流动的几何形状。这些形状可以是圆形，椭圆形，简单或复杂多边形，甚至是图像和渐变。shapes的一些实际设计应用可能是在圆形化身周围显示圆形文本，在全宽背景图像的简单部分上显示文本，以及在文章中显示文本中的文本流。
既然css shapes已经在现代浏览器中获得了广泛的支持，那么值得一看的是它们提供的灵活性和功能，以确定它们在您的下一个设计项目中是否有意义。
注意：在撰写本文时，css shapes支持firefox，chrome，safari和opera，以及ios safari和chrome for android等移动浏览器。形状没有ie支持，并且正在考虑?microsoft edge。
首先看看css形状css shapes的当前实现是css shapes module level 1，它主要围绕shape-outside属性。shape-outside定义文本可以流动的形状。
考虑到存在shape-outside属性，您可能会假设存在一个对应的shape-inside属性，该属性将包含形状中的文本。一个shape-inside属性可能在未来成为现实，但目前它是在一个草案css形状模块2级，而不是由任何浏览器来实现。
在本文中，我们将演示如何使用<basic-shape>数据类型并使用形状函数值设置它，以及使用半透明url或渐变设置形状。
基本形状函数我们可以通过将以下函数值应用于shape-outside属性来定义css中的各种基本形状：
circle()ellipse()inset()polygon()为了将shape-outside属性应用于元素，元素必须浮动，并具有定义的高度和宽度。让我们来看看四种基本形状中的每一种，并演示如何使用它们。
圈我们将从该circle()功能开始。想象一下这样一种情况：我们有一个我们想要向左浮动的作者的圆形化身，我们希望作者的描述文本在它周围流动。仅仅使用border-radius: 50%头像元素就不足以使文本形成圆形;?文本仍会将头像视为矩形元素。
通过圆形，我们可以演示文本如何围绕圆圈流动。
我们首先要circle在常规上创建一个类div，并制作一些段落。（我使用bob ross引用为lorem ipsum文本。）
<div class=circle></div>
<p>example text...</p>在我们的circle课堂上，我们留下浮动的元素，给它一个平等height和width，并设置shape-outside到circle()。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle();
}如果我们查看页面，它将如下所示。
如您所见，文本围绕圆形流动，但我们实际上看不到任何形状。将鼠标悬停在开发人员工具中的元素上将向我们显示正在设置的实际形状。
此时，您可能会认为可以background为元素设置颜色或图像，并且您将看到形状。让我们尝试一下。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle();
background: linear-gradient(to top right, #fdb171, #fd987d);
}无奈的是，设置background于circle只是给我们一个矩形，我们一直在试图避免的事情。
我们可以清楚地看到文本在它周围流动，但元素本身没有形状。如果我们想要实际显示我们的形状函数，我们将不得不使用该clip-path属性。clip-path取许多相同的值shape-outside，所以我们可以给它相同的circle()值。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle();
clip-path: circle();
background: linear-gradient(to top right, #fdb171, #fd987d);
}
对于本文的其余部分，我将用它clip-path来帮助我们识别形状。
该circle()函数采用半径的可选参数。在我们的例子中，默认半径（r）是50%，或100px。使用circle(50%)或circle(100px)将产生与我们已经完成的结果相同的结果。
您可能会注意到文本正对着形状。我们可以用shape-margin属性来余量添加到形状，其可以在被设置px，em，%，和测量的任何其他标准的css单元。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle(25%);
shape-margin: 1rem;
clip-path: circle(25%);
background: linear-gradient(to top right, #fdb171, #fd987d);
}以下是应用25%?circle()半径的示例shape-margin。
除了半径之外，形状函数可以使用位置at。默认位置是圆的中心，因此circle()将明确地写为circle(50% at 50% 50%)或circle(100px at 100px 100px)，其中两个值分别是水平和垂直位置。
为了明确定位的工作原理，我们可以将水平位置值设置0为一个完美的半圆。
circle(50% at 0 50%);该坐标定位系统称为参考框。
稍后，我们将学习如何使用图像而不是形状或渐变。现在，我们将继续进行下一个形状函数。
椭圆类似于circle()功能是ellipse()，它创建一个椭圆形。为了演示，我们可以创建一个ellipse元素和类。
<div class=ellipse></div>
<p>example text...</p>.ellipse {
float: left;
shape-outside: ellipse();
clip-path: ellipse();
width: 150px;
height: 300px;
background: linear-gradient(to top right, #f17bb7, #ad84e3);
}这一次，我们设置了一个不同的，height并width制作一个垂直拉长的椭圆形。
a?ellipse()和a?之间的区别在于circle()椭圆具有两个半径 –?r?x和r?y，或者x轴半径和y轴半径。因此，上面的例子也可以写成：
ellipse(75px 150px);圆和椭圆的位置参数相同。半径，除了作为测量单位，还包括的选项farthest-side和closest-side。
closest-side“参考盒”?farthest-side是指从参考盒的中心到最近侧的长度，相反，是指从参考盒的中心到最远侧的长度。这意味着如果未设置默认值以外的位置，则这两个值无效。
下面是翻转的差的示范closest-side和farthest-side上一个ellipse()与一个25%在x偏移和y轴。
ellipse(farthest-side closest-side at 25% 25%)
ellipse(farthest-side closest-side at 25% 25%)
插页到目前为止，我们只处理圆形，但我们可以使用该inset()函数定义插入矩形。
<div class=inset></div>
<p>example text...</p>.inset {
float: left;
shape-outside: inset(75px);
clip-path: inset(75px);
width: 300px;
height: 300px;
background: linear-gradient(#58c2ed, #1b85dc);
}在这个例子中，我们将创建一个300pxby?300px矩形，并75px在所有方面插入它。这将使我们有一个150px由150px与75px它周围的空间。
我们可以看到矩形是插入的，文本忽略了插入区域。
一个inset()形状也可以border-radius使用round参数，文本将尊重圆角，例如这个示例的25px所有边和75px圆角。
inset(25px round 75px)
喜欢padding或margin简写，插入值将接受top?right?