CSS属性 shape-outside 用法举例
本帖最后由 马黑黑 于 2024-2-13 14:12 编辑 <br /><br /><style>.papa { margin: auto; max-width: 720px; font-size: 18px; }
.papa pre { padding: 12px; background: #eee; color: navy; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.mpic { float: left; width: 160px; height: 160px; object-fit: cover; border-radius: 50%; shape-outside: circle(50%); margin: 28px; }
.mpic:nth-of-type(2) { float: right; border-radius: 30% 60%; shape-outside: ellipse(30% 60%); margin-left: 50px; }
</style>
<div class="papa">
<img class="mpic" src="https://638183.freep.cn/638183/t24/jpg/g54.jpg" alt="" />
<p>css属性 shape-outside 允许我们通过浮动元素的浮动属性（float）来营造文本流的环绕布局，具体说来就是，浮动元素介入文本流的自然流动，文本在其影响下可以以浮动元素设定的矩形、圆形、椭圆形或者来自图形等形状呈现出相应的环绕布局形态。在 shape-outside 属性面世之前，我们其实也可以达成文本环绕元素（例如图片）进行布局的功能，但仅仅是矩形环绕，文本在与其被环绕元素的边缘之间以垂直方向为分界上下对齐的形态呈现，而现在，这种状态可以改变，一切归功于 shape-outside 属性。该属性提供几个基本形状：inset（矩形）、polygon（多边形）、circle（圆形）、ellipse（椭圆形）以及 url() 函数。shape-outside 属性的使用仍然需要元素形状、外边距的属性的配合，试看如下代码：</p>
<pre>
.mpic {
float: left;
width: 160px;
height: 160px;
object-fit: cover;
border-radius: 50%;
shape-outside: circle(50%);
margin: 8px;
}
</pre>
<img class="mpic" src="https://638183.freep.cn/638183/t24/jpg/g54.jpg" alt="" />
<p>上述代码，选择器 .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 属性的作用，它可以借助浮动元素的介入影响自身的自然流动，形成有趣的文本绕排效果。</p>
</div>
shape-outside 好，可以让文字包围着图图，真好看。{:4_199:} float可以设置居中么，让图片在当中，文字四周环绕{:4_173:} 还可以椭圆环绕呢，这个语句真强大。学习了{:4_199:} 红影 发表于 2024-2-13 16:19
float可以设置居中么，让图片在当中，文字四周环绕
其实是可以的，上下分别输入文字，然后设置图片居中环绕。
上下本来就是直的，不可能弯曲，左右才有弯曲效果{:4_173:} 红影 发表于 2024-2-13 16:11
shape-outside 好，可以让文字包围着图图，真好看。
简单用 float 也是可以的 红影 发表于 2024-2-13 16:19
float可以设置居中么，让图片在当中，文字四周环绕
float有好几个属性值可选，就是没有能实现四周环绕的值 记得以前有过直角，90度的文字包图片，现在是圆的了，黑黑厉害{:4_199:} 太妙了，相互增益。牛人啊 马黑黑 发表于 2024-2-13 17:31
简单用 float 也是可以的
是的，就是少点环形的感觉呢。 马黑黑 发表于 2024-2-13 17:33
float有好几个属性值可选，就是没有能实现四周环绕的值
能左右环绕就行啊，左拥右抱的，多好{:4_170:} 俺又飘过了{:6_211:} 千羽 发表于 2024-2-13 19:12
俺又飘过了
{:4_190:} 红影 发表于 2024-2-13 18:34
能左右环绕就行啊，左拥右抱的，多好
也是 红影 发表于 2024-2-13 18:33
是的，就是少点环形的感觉呢。
也是环绕，基于 inset 马黑黑 发表于 2024-2-13 20:35
也是
这个shape-outside 真好{:4_173:} 马黑黑 发表于 2024-2-13 20:35
也是环绕，基于 inset
不过我们做帖子的时候，很少有这么多字的时候吧。 红影 发表于 2024-2-13 21:25
不过我们做帖子的时候，很少有这么多字的时候吧。
你们写那几行诗就木有，这需要长篇大论 红影 发表于 2024-2-13 21:24
这个shape-outside 真好
不错的 马黑黑 发表于 2024-2-13 22:19
你们写那几行诗就木有，这需要长篇大论
嗯嗯，大多数做帖都是用图的时候多。