shape-outside

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

shape-outside 属性控制内容如何围绕浮动元素的边界框进行环绕。 通常情况下,这样做是为了让文本能够在圆形、椭圆形或多边形等形状上重新流动。

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

重要的是要注意,此属性目前只对浮动元素起作用,不过这种情况将来可能会改变。 shape-outside 属性也可以使用 过渡或动画 进行操作。

  • circle():用于制作圆形。
  • ellipse():用于制作椭圆形。
  • inset():用于制作矩形。
  • polygon():用于创建任何具有 3 个或更多顶点的形状。
  • url():标识应使用哪个图像来环绕文本。
  • initial:浮动区域不受影响。
  • inherit:从父级继承 shape-outside 值。

以下值标识应使用哪个 盒子模型 的引用来定位形状。

  • margin-box
  • padding-box
  • border-box

这些值应附加到末尾,例如:shape-outside: circle(50% at 0 0) padding-box。 默认情况下,将使用 margin-box 引用。

ellipse()

.element {
  shape-outside: ellipse(150px 300px at 50% 50%);
}

ellipse() 函数需要椭圆 x、y 轴的半径值,以及用于在边界框内定位形状中心的坐标。 例如,上面的示例将椭圆的中心定位在 .element div 的垂直和水平中心。

虽然上面的演示可能表明我们正在改变 div 本身的形状,但如果我们添加边框和背景图像,我们会发现边界框实际上仍然是矩形。

最好这样理解:使用 shape-outside 属性,我们正在改变其他元素围绕元素的关系,而不是元素本身的几何形状。 要解决这个问题,我们需要将 shape-outside 属性与 clip-path() 属性一起使用,例如在以下示例中。

circle()

.element {
  shape-outside: circle(50%);
}

此函数创建一个圆形,在上面的代码示例中,它将创建一个半径为 .element 高度和宽度一半的圆形。 circle() 函数也可以使用相同的语法来定位形状。

url()

.element {
  shape-outside: url('circle.png'); 
}

在这种情况下,我们有两个浮动图像,一个在文本块的左侧,另一个在右侧。 由于两个图像都设置了 shape-outside 属性,因此下面的文本将避开这两个浮动图像。

还可以设置 shape-image-threshold 属性,该属性将告知浏览器哪些像素(根据其透明度)应创建形状。 例如:

.element {  
  shape-outside: url('image.png'); 
  shape-image-threshold: 0.5;
}

在此示例中,只有透明度为 50% 或更高的像素才会创建形状。 从 0.0(透明)到 1.0(不透明)的值是有效的。

polygon()

.element {
  shape-outside: polygon(0 0, 0 200px, 300px 600px);
}

此函数创建任何具有三个或更多顶点的形状,例如:

重要的是要注意,如果此属性将被动画化,则在声明动画状态时,它需要相同数量的顶点。

.element {  
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}
.element:hover {  
	shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

inset()

.element {
  shape-outside: inset(100px 100px 100px 100px 10px);
  /* shape-outside: inset(top right bottom left border-radius); */
}

inset() 是一个用于制作矩形形状的函数,它接受五个参数,但第五个参数(用于 border-radius)是可选的。 其他参数是从 .element 边缘向内偏移。

上面我们有一个 200px 宽、200px 高的元素,我们将形状内部偏移到除左侧以外的每个方向上的 50px。 这样,即使 div 扩展到顶部,文本也会在形状上方环绕。

其他资源

浏览器支持

这些浏览器支持数据来自 Caniuse,其中有更多详细信息。 数字表示浏览器在该版本及更高版本上支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
3762797.1*

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271271278*