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,其中有更多详细信息。 数字表示浏览器在该版本及更高版本上支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
37 | 62 | 否 | 79 | 7.1* |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 8* |
知道 FF 什么时候会支持 shape-outside 吗?
此功能在 Firefox 53 中的 layout.css.shape-outside.enabled 首选项后面实现,默认值为 false。
它刚刚在 Nightly 构建中启用,
你好!
不工作
正确地
您好,有没有办法将 shape-outside.circle 属性与网格一起使用?我使用网格布局设计了页面,但我想像使用浮动一样将文本包裹在图像周围,但我知道浮动不适用于网格。你们如何使用网格实现该效果?谢谢
你好!真棒技巧!我在我的网站上使用了一些。如果可以的话,你能指引我去任何针对视频而不是图像的相同指南吗?
react native 帮助
const float = {
shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px),
width: 10,
height: 10,
shape-margin: 10
};
在 Chrome 中,它不适用于 url(png 路径)?