css 属性shape-outside的妙用

109 阅读1分钟

css 属性shape-outside的妙用

shape-outside 的 CSS 属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。默认情况下,内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。(MDN)

例如,我们想让文字随着圆形的边框环绕。但是我们检查元素可以发现,虽然给了border-radius:50%;但外部轮廓依然是矩形。

image.png

这种情况,我们就可以使用shape-outside.

image.png

image.png

shape-outside有很多属性,可以根据自己的实际场景选择使用。

image.png