介绍CSS形状 – CSS Shapes
原文来自:http://www.w3cbest.com/?p=360
特殊图像来自：http://www.07net01.com/2016/11/1705071.html
CSS形状允许我们通过定义几何形状、图像和渐变来创建有趣且独特的布局，文本内容可以在这些图形中流动。在本教程中学习如何使用它们。
在引入CSS形状之前，几乎不可能为web设计具有自由流动文本的杂志式布局。相反，web设计布局传统上是由网格、框和直线构成的。
CSS形状允许我们定义文本可以流动的几何形状。这些形状可以是圆，椭圆，简单或复杂的多边形，甚至图像和梯度。形状的一些实用设计应用程序可能是在圆形头像周围显示圆形文本，在全幅背景图像的简单部分上显示文本，以及在文章中显示围绕着下划线流动的文本。
既然CSS形状已经在现代浏览器中得到了广泛的支持，那么有必要研究一下它们提供的灵活性和功能，看看它们在您的下一个设计项目中是否有意义。
注意:在撰写本文时，CSS图形已经支持Firefox、Chrome、Safari和Opera，以及iOS Safari和Android Chrome等移动浏览器。形状没有IE支持，并且正在考虑微软的Edge。
首先看看CSS形状
当前CSS Shapes的实现是CSS Shapes模块级别1，它主要围绕着shape-outside属性。shape-outside定义了一个文本可以流动的形状。
考虑到有一个shape-outside属性，您可以假设有一个相应的shape-inside属性，它将包含一个shape中的文本。形状内部属性可能在将来成为现实，但它目前是CSS形状模块级别2中的草案，没有任何浏览器可以实现。
在本文中，我们将演示如何使用<basic-shape>数据类型并使用形状函数值设置它，以及使用半透明URL或渐变设置形状。
基本形状函数
我们可以通过对shape-outside属性应用以下函数值来定义CSS中的各种基本形状:
- circle()
- ellipse()
- inset()
- polygon()
为了将shape-outside属性应用到元素上，元素必须是浮动的，并且具有定义的高度和宽度。让我们逐一介绍这四个基本形状，并演示如何使用它们。
circle
我们将从circle()函数开始。想象一下这样一种情况，我们有一个作者的圆形头像，我们想要向左浮动，我们希望作者的描述文本围绕着它流动。简单地使用边框半径:avatar元素的50%不足以让文本形成圆形;文本仍然将avatar视为一个矩形元素。
使用圆形形状，我们可以演示文本如何围绕圆形流动。
我们将从在常规div上创建circle类开始，并创建一些段落。
<div class="circle"></div> <p>Example text...</p>
在circle类中，我们将元素浮动到左边，给它一个相等的高度和宽度，并将shape-outside设置为circle()。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle();
}
如果我们看这个页面，它会是这样的。
正如你所看到的，文字围绕着圆形流动，但我们实际上看不到任何形状。将鼠标悬停在Developer Tools中的元素上，将向我们显示正在设置的实际形状。
此时，您可能认为可以为元素设置背景颜色或图像，然后您将看到形状。我们试一下。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle();
background: linear-gradient(to top right, #FDB171, #FD987D);
}
令人沮丧的是，为圆形设置背景只会得到一个矩形，这正是我们一直试图避免的。
我们可以清楚地看到文字在它周围流动，但是元素本身并没有形状。如果我们想实际显示形状函数，就必须使用剪贴路径属性。剪贴路径的值与shape-outside的值相同，所以我们可以给它相同的circle()值。
.circle {
float: left;
height: 200px;
width: 200px;
shape-outside: circle();
clip-path: circle();
background: linear-gradient(to top right, #FDB171, #FD987D);
}
在本文的其余部分，我将使用剪贴路径来帮助我们识别形状。
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%圆()半径的示例。
除了半径之外，形状函数还可以使用at定位。默认位置是圆的中心，因此circle()将显式地表示为圆(50%在50%处)或圆(100px在100px处)，这两个值分别是水平位置和垂直位置。
为了明确定位的工作原理，我们可以将水平位置值设为0，形成一个完美的半圆。
circle(50% at 0 50%);
这种坐标定位系统称为参考框。
稍后，我们将学习如何使用图像而不是形状或梯度。现在，我们继续下一个形状函数。
Ellipse
与circle()函数类似的是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);
}
这次，我们设置了不同的高度和宽度，使一个垂直拉长的椭圆形。
ellipse() 和 circle()的区别在于，ellipse有两个半径rx和ry，即x轴半径和y轴半径。因此，上述例子也可以写成:
ellipse(75px 150px);
ellipse 和 circle的位置参数是相同的。半径，除了作为一个测量单位，还包括farthest-side 和 closest-side两个选项。
closest-side是指从参考框的中心到最近边的长度，反之，farthest-side是指从参考框的中心到最远边的长度。这意味着，如果未设置默认位置以外的位置，这两个值将无效。
下面演示了在ellipse()上closest-side和farthest-side的区别，在X轴和Y轴上偏移25%。
ellipse(farthest-side closest-side at 25% 25%)
ellipse(farthest-side farthest-side at 25% 25%)
Inset
到目前为止，我们只处理圆形的形状，但是我们可以使用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);
}
在本例中，我们将创建一个300px×300px的矩形，并在所有边内嵌75px。这样我们就得到了150px×150px的图像周围有75px的空间。
我们可以看到矩形是内嵌的，文本忽略了内嵌区域。
inset()形状还可以采用带有圆形参数的边框半径，文本将尊重圆角，例如这个示例，四边为25px，四舍五入为75px。
inset(25px round 75px)
就像填充或边距简写一样，inset值将按顺时针顺序接受左上方的值(inset(25px 25px 25px 25px))，仅使用一个值将使所有四个边相同(inset(25px))。
Polygon
形状函数中最有趣和最灵活的是polygon()，它可以通过x和y点的数组来创建任何复杂的形状。数组中的每一项都代表xi yi，并被写成多边形(x1 y1, x2 y2, x3 y3…)等等。
我们可以应用到多边形上的点集最少的数量是3，这将创建一个三角形。
<div class="polygon"></div>
<p>Example text...</p>
.polygon {
float: left;
shape-outside: polygon(0 0, 0 300px, 200px 300px);
clip-path: polygon(0 0, 0 300px, 200px 300px);
height: 300px;
width: 300px;
background: linear-gradient(to top right, #86F7CC, #67D7F5);
}
在这个形状,第一点是0 0,左上角最在div。第二点是0 300 px,这是大多数div的左下角。第三个和最后一个点是200 px 300 px,这是2/3rd在X轴和仍在底部。最终的形状是这样的:
polygon() shape函数的一个有趣用法是，文本内容可以在两个或多个形状之间流动。由于多边形()形状是如此灵活和动态，这是制作真正独特的、杂志式布局的最大机会之一。在本例中，我们将在两个多边形形状之间放置一些文本。
<div class="left"></div>
<div class="right"></div>
<p>Example text...</p>
.left {
float: left;
shape-outside: polygon(0 0, 0 300px, 200px 300px);
clip-path: polygon(0 0, 0 300px, 200px 300px);
background: linear-gradient(to top right, #67D7F5, #86F7CC);
height: 300px;
width: 300px;
}
.right {
float: right;
shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
background: linear-gradient(to bottom left, #67D7F5, #86F7CC);
height: 300px;
width: 300px;
}
显然，手工创建您自己的复杂形状是非常困难的。幸运的是，有几种工具可以用来创建多边形。Firefox有一个内置的形状编辑器，您可以通过单击检查器中的多边形形状来使用它。
目前，Chrome有一些可以使用的扩展，比如CSS shape Editor。
多边形可以用来裁剪图像或其他元素周围的形状。在另一个例子中，我们可以通过在一个大字周围画一个多边形来创建一个drop cap。
<div class="letter">R</div>
<p>Example text...</p>
.letter {
float: left;
font-size: 400px;
font-family: Georgia;
line-height: .8;
margin-top: 20px;
margin-right: 20px;
shape-outside: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px) content-box;
clip-path: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px);
}
URLs
CSS形状的一个令人兴奋的特性是，您不必总是用形状函数显式地定义形状;您还可以使用半透明图像的url来定义形状，文本将自动围绕它流动。
需要注意的是，所使用的映像必须与CORS兼容，否则您将得到如下所示的错误。
Access to image at 'file:///users/tania/star.png' from origin 'null' has been blocked by CORS policy: The response is invalid.
在服务器上提供来自同一服务器的映像将确保您不会得到那个错误。
与其他示例不同，我们将使用img标记而不是div。这一次CSS很简单—只需将url()放到shape-outside属性中，就像使用background-image一样。
<img src="./star.png" class="star">
<p>Example text...</p>
.star {
float: left;
height: 350px;
width: 350px;
shape-outside: url('./star.png')
}
因为我使用的图像是一颗具有透明背景的恒星，所以文本知道哪些区域是透明的，哪些区域是不透明的，并相应地对自己进行对齐。
Gradients
最后，渐变也可以用作形状。渐变和图像是一样的，就像我们上面使用的图像示例一样，文本将知道在透明部分周围流动。
我们将使用渐变的一个新属性——形状-图像-阈值。形状-图像-阈值定义形状的alpha通道阈值，或图像的透明与不透明之比。
我要做一个渐变的例子，它是颜色和透明的50%/50%的分割，并设置一个形状-图像-阈值为。5，这意味着所有超过50%不透明的像素都应该被认为是图像的一部分。
<div class="gradient"></div>
<p>Example text...</p>
.gradient {
float: left;
height: 300px;
width: 100%;
background: linear-gradient(to bottom right, #86F7CC, transparent);
shape-outside: linear-gradient(to bottom right, #86F7CC, transparent);
shape-image-threshold: .5;
}
我们可以看到渐变在不透明和透明的中心完美地对角线分割。
总结
在这篇文章中，我们学习了CSS图形的三种属性:形状-外部、形状-边缘和形状-图像-阈值。我们还学习了如何使用函数值创建圆形、椭圆、嵌入矩形和复杂的多边形，文本可以在这些多边形中流动，并演示了形状如何检测图像和梯度的透明部分。
See the Pen CSS Shapes Examples by w3cbest.com (@w3cbest) on CodePen.