CSS中浮动元素周围的杂志样式形状与shape-outside

介绍

CSS Shapes 模块 1 的一部分，shape-outside 是一个有趣的属性，它可以很容易地为浮动元素周围的文本设置形状。 例如，如果浮动元素是具有大量空白的图像，或者如果它具有不同的边框半径，则 shape-outside 的值将发挥作用，以定义其周围的文本将如何换行。

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

shape-outside 的值可以是关键字、形状函数或图像的 URL。 让我们简要探讨每个选项：

形状关键字

您可以将 shape-outside 设置为 margin-box、padding-box、content-box 或 border-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，欧盟 volutpat mauris。 Donec interdum tempor risus。 Maecenas eu tincidunt 侵权人。 Donec tincidunt turpis enim，ac bibendum lorem blandit 在。 Pellentesque ullamcorper ex sit amet mauris dictum varius。

img.shape1 {
  float: left;
  margin-right: 2rem;
  border-radius: 0% 90%;
  -webkit-shape-outside: margin-box;
  shape-outside: margin-box;
}

margin、padding、content 和 border 关键字之间的区别在于浏览器设置形状“边界”的位置。 例如，设置 border-box 将强制文本完全围绕元素的 border 的外边缘流动。

形状函数

shape-outside 也可以采用四种可能的形状函数之一：circle()、polygon()、ellipse() 或 [ X136X]插入（）。

圆圈

这是一个向左浮动的图像示例，其 border-radius 为 50%：

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

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

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

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

---

椭圆

在 ellipse() 形状函数的情况下，语法类似于圆形，除了提供了 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，在 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 sat amet accumsan sat amet，malesuada quis diam。 Donec condimentum odio eu ex pretium facilisis。 Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit。 在 convallis molestie 中的 Donec sagittis arcu。 奥尔纳雷的 Maecenas vehicula hendrerit lacus。 Suspendisse mattis ac mauris eu auctor。 Nulla eu ipsum a lectus posuere aliquam id id est。

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

在这里，我们还使用 object-fit 来确保图像保持其纵横比，即使我们压缩了尺寸。

---

多边形

您可以使用 polygon() 颜色函数创建各种有趣的形状。 然而，计算出合适的尺寸是相当复杂的，所以对于更复杂的形状，你可能想要使用像这样的工具这样伟大的 CSS 形状编辑器 Chrome 扩展。

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，在 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 sat amet accumsan sat amet，malesuada quis diam。 Donec condimentum odio eu ex pretium facilisis。 Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit。 在 convallis molestie 中的 Donec sagittis arcu。 奥尔纳雷的 Maecenas vehicula hendrerit lacus。 Suspendisse mattis ac mauris eu auctor。 Nulla eu ipsum a lectus posuere aliquam id id est。

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

这里注意使用 shape-margin 属性，稍微微调整个形状。

---

插图

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

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，在 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 sat amet accumsan sat amet，malesuada quis diam。 Donec condimentum odio eu ex pretium facilisis。 Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit。 在 convallis molestie 中的 Donec sagittis arcu。 奥尔纳雷的 Maecenas vehicula hendrerit lacus。 Suspendisse mattis ac mauris eu auctor。 Nulla eu ipsum a lectus posuere aliquam id id est。

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

网址

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

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，在 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 sat amet accumsan sat amet，malesuada quis diam。 Donec condimentum odio eu ex pretium facilisis。 Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit。 在 convallis molestie 中的 Donec sagittis arcu。 奥尔纳雷的 Maecenas vehicula hendrerit lacus。 Suspendisse mattis ac mauris eu auctor。 Nulla eu ipsum a lectus posuere aliquam id id est。

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

这是我们的透明 png (shape.png) 图像的样子：

浏览器兼容性：截至2020年，全球94% of个浏览器支持shape-outside属性。 唯一完全不支持的浏览器是 Internet Explorer 11。