简介

Css Shares模块1，Shape-Outside )的一部分是一个有趣的属性，它使得在浮动元素周围设置文本环绕的形状变得很容易。例如，如果浮动元素是具有大量空白的图像，或者如果它具有不同的边框半径，则Shape-Outside的值将起作用，以定义围绕它的文本将如何换行。

使用Shape-Outside可以创建接近我们在杂志中看到的页面布局。对于支持的浏览器来说，它可以是一个很好的渐进增强，而在不支持的浏览器中，该属性被简单地忽略。

Shape-Outside的值可以是关键字、Shape函数或图像的URL。让我们简要地了解一下每个选项：

形状关键字

您可以将Shape-Outside设置为warge-box、paddingbox、content-box或edge-box等值。这使得将跟随边框半径值的文本应用于浮动元素变得很容易：

margin-box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus euismod tempor. Ut ac condimentum neque. Vivamus vel tristique lacus. Aenean volutpat volutpat diam, eu volutpat mauris. Donec interdum tempor risus. Maecenas eu tincidunt tortor. Donec tincidunt turpis enim, ac bibendum lorem blandit at. Pellentesque ullamcorper ex sit amet mauris dictum varius.

1img.shape1 {
2  float: left;
3  margin-right: 2rem;
4  border-radius: 0% 90%;
5  -webkit-shape-outside: margin-box;
6  shape-outside: margin-box;
7}

关键字Edge、padding、Content和border的区别在于浏览器设置形状的边界的位置。例如，设置edge-box将强制文本恰好围绕元素的border的外边缘流动。

形状函数

shape-outside 也可以采用四种可能的形状函数之一：circle（)，polygon（)，ellipse（)或inset（)。

圈

下面是一个浮动到左侧的图像的示例，其边界半径为 50% ：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu nec lacus venenatis pulvinar. Cras lacinia turpis diam, at euismod velit auctor sed. Curabitur bibendum sodales tortor et lobortis. Cras vitae vulputate ex. Vivamus in faucibus mi. Aliquam auctor sem ac lobortis volutpat. Integer fringilla lacus suscipit nisl blandit, sed efficitur elit ultricies. Curabitur ac laoreet ligula. Nullam et enim ut risus commodo tempor. Vivamus dictum sit amet erat vitae dapibus.

1img.shape2 {
2  float: left;
3  margin-right: 2rem;
4  border-radius: 50%;
5  -webkit-shape-outside: circle();
6  shape-outside: circle();
7}

Circle()形状函数还可以采用半径和位置值：

1/* Circle width a 40% radius and positioned at 20% 60% */
2shape-outside: circle(40% at 20% 60%);

椭圆

在椭圆()形状函数中，除了提供了X半径和Y半径外，其语法类似于圆的语法：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.

 1.shape3 {
 2  float: right;
 3  width: 230px;
 4  height: 140px;
 5  margin-left: 2rem;
 6  border-radius: 50%;
 7  -webkit-shape-outside: ellipse(100px 55px at 38.7% 52.25%);
 8  shape-outside: ellipse(100px 55px at 38.7% 52.25%);
 9  object-fit: cover;
10}

<$>[注意]这里我们还使用了object-fit，以确保即使我们挤压了尺寸，图像也保持了其宽高比。<$>

多边形

您可以使用POLYGON()颜色函数创建各种有趣的形状。然而，找出合适的维度是相当复杂的，所以对于更复杂的形状，你可能会想要使用这样一个很棒的工具css Shares EditorChrome扩展。

1img.shape4 {
2  float: left;
3  -webkit-shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
4  shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
5  -webkit-shape-margin: .7rem;
6  shape-margin: .7rem;
7}

<$>[注]这里请注意，使用了Shape-March属性来稍微微调整个形状。<$>

插图

使用inset()形状函数，您证明了顶部、右侧、底部和左侧位置的插入值：

1img.shape5 {
2  float: right;
3  -webkit-shape-outside: inset(50px 0 50px 55px);
4  shape-outside: inset(50px 0 50px 55px);
5}

URL

我们可以通过URL提供一个图像，图像的不透明部分创建形状：

1img.shape6 {
2  float: left;
3  shape-outside: url("/shape.png");
4}

下面是我们的透明PNG(shape.png)图像：

<$>[信息] 浏览器兼容性： 截至2020年，94%的浏览器worldwide支持Shape-Outside属性。唯一完全缺乏支持的浏览器是Internet Explorer 11。 <$>

使用 shape-outside 在 CSS 中的浮动元素周围制作杂志风格的形状

简介

形状关键字

形状函数

圈

椭圆

多边形

插图

URL