CSS Shapes允许我们通过定义文本内容可以流动的几何形状，图像和渐变来制作有趣且独特的布局。在本教程中学习如何使用它们。
在引入CSS Shapes之前，几乎不可能设计出具有自由流动文本的杂志式布局。相反，网页设计布局传统上采用网格，方框和直线形状。
CSS Shapes允许我们定义文本可以流动的几何形状。这些形状可以是圆形，椭圆形，简单或复杂多边形，甚至是图像和渐变。Shapes的一些实际设计应用可能是在圆形化身周围显示圆形文本，在全宽背景图像的简单部分上显示文本，以及在文章中显示文本中的文本流。
既然CSS Shapes已经在现代浏览器中获得了广泛的支持，那么值得一看的是它们提供的灵活性和功能，以确定它们在您的下一个设计项目中是否有意义。
首先看看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 bottom left顺时针顺序（inset(25px 25px 25px 25px)）的值，并且只使用单个值将使所有四个边相同（inset(25px)）。
多边形
形状函数中最有趣和最灵活的是polygon()，它可以采用一系列x和y点来制作任何复杂的形状。数组中的每个项目代表x i y i，并且将被写为polygon(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 300px，这是最左下角的点div。第三个也是最后一个点是200px 300pxX轴上的2/3并且仍然在底部。结果形状如下所示：
polygon()形状函数的一个有趣用法是文本内容可以在两个或更多个形状之间流动。由于polygon()形状如此灵活和动态，这是制作真正独特的杂志式布局的最大机会之一。在这个例子中，我们将在两个多边形形状之间放置一些文本。
<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 Shapes Editor。
多边形可用于剪切图像或其他元素周围的形状。在另一个示例中，我们可以通过围绕大字母绘制多边形来创建首字下沉。
<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);
}
网址
CSS Shapes的一个令人兴奋的功能是你不必总是用形状函数明确定义形状; 您还可以使用半透明图像的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-inside属性中，就像使用它一样background-image。
<img src="./star.png" class="star">
<p>Example text...</p>.star {
float: left;
height: 350px;
width: 350px;
shape-outside: url('./star.png')
}
由于我使用的图像是具有透明背景的星形，因此文本知道哪些区域是透明的，哪些区域是不透明的，并且相应地对齐。
渐变
最后，渐变也可以用作形状。渐变与图像相同，就像我们上面使用的图像示例一样，文本将知道在透明部分周围流动。
我们将使用一个带渐变的新属性 – shape-image-threshold。的shape-image-threshold限定形状的α信道的阈值，或什么百分比的图像可以是透明的对不透明的。
我要做一个渐变的例子，是一个颜色和透明的50％/ 50％分割，并设置shape-image-threshold的.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;
}
我们可以看到梯度在不透明和透明的中心对角线完美分割。
结论
在这篇文章中，我们了解到shape-outside，shape-margin和shape-image-threshold，CSS形状的三个属性。我们还学习了如何使用函数值创建圆形，椭圆形，插入矩形和文本可以流动的复杂多边形，并演示了形状如何检测图像和渐变的透明部分。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261418.html