CSS属性 shape-outside 用法举例

马黑黑 · 发表于 2024-2-13 14:10

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-2-13 14:12 编辑

css属性 shape-outside 允许我们通过浮动元素的浮动属性（float）来营造文本流的环绕布局，具体说来就是，浮动元素介入文本流的自然流动，文本在其影响下可以以浮动元素设定的矩形、圆形、椭圆形或者来自图形等形状呈现出相应的环绕布局形态。在 shape-outside 属性面世之前，我们其实也可以达成文本环绕元素（例如图片）进行布局的功能，但仅仅是矩形环绕，文本在与其被环绕元素的边缘之间以垂直方向为分界上下对齐的形态呈现，而现在，这种状态可以改变，一切归功于 shape-outside 属性。该属性提供几个基本形状：inset（矩形）、polygon（多边形）、circle（圆形）、ellipse（椭圆形）以及 url() 函数。shape-outside 属性的使用仍然需要元素形状、外边距的属性的配合，试看如下代码：

.mpic {
	float: left;
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
	shape-outside: circle(50%);
	margin: 8px;
}

上述代码，选择器 .mpic 使用了左浮动（float: left;），也可以使用右浮动（right），圆角半径设为 50% 使之成为圆形，外边距 margin 设为 8px 以便让文本与图形间不那么亲近。接着就是本文主角闪亮登场了，shape-outside ，它的形状设置为圆形，circle(50%)。就是这段代码作用于本文的第一个段落。而本段文本，浮动元素右浮动（float: right;），shape-outside 属性值设为 ellipse(30% 60%)，是椭圆形形状，其参数除了XY轴半径，还可以使用 at position 设定椭圆位置，如 30% 60% at 50% 50% ，表示位于元素中心位置；为配套文本流环绕形状，margin-left（左外边距）设为大一点，这里设置为 50px，然后 border-radius 设为 30% 60%，也可以根据需要设置为更精巧一些，仅需要注意整体外观与文本绕排效果相符合便可。除了圆和椭圆这两个形状还有 inset、polygon 和 url() 函数可供选用，这里就不一一举例了，感兴趣的朋友可以网补一些这些形状在 shape-outside 属性中的具体用法。总之，通过本文示例，我们应该了解到 shape-outside 属性的作用，它可以借助浮动元素的介入影响自身的自然流动，形成有趣的文本绕排效果。