再谈谈CSS shape-outside 属性
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.clip-pic { margin: 0 10px; max-width: 160px; clip-path: circle(50%); shape-outside: circle(50%); shape-box: margin-box; }
.float-left { float: left; }
.float-right { float: right; }
.wz { max-width: 1000px; background: beige url('https://638183.freep.cn/638183/small/webp/bg02.webp') no-repeat center/cover; color: navy; }
.wz > p:not() { margin: 5px 0; text-indent: 2em; }
.wz pre { font-size: 18px; color: blue; }
txt-red { color: red; }
</style>
<div id="wz" class="wz"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
const tz = TZ.TZ('wz');
const text = `<img class="clip-pic float-left" src="https://638183.freep.cn/638183/small/webp/g111.webp" alt="" />
<p>CSS3 属性 shape-outside 允许设置一个不一定是矩形形状的元素，该元素会影响与之相邻的内联内容的排版，确切说，其周边的同层级元素会智能环绕该元素的形状进行部署。利用 shape-outside 属性，文本流的渲染效果在一定程度上可以媲美传统印刷品——尽管它的排版自由度仍然有诸多的受限。</p>
<img class="clip-pic float-right" src="https://638183.freep.cn/638183/small/webp/p111.webp" alt="" />
<p>shape-outside 属性不能独立工作，它需要另外两个属性与之配合：其一，clip-path 属性，用于制定待包围环绕元素的剪裁路径，其实也就是将元素剪裁出所需的形状，该形状应该是周边内容例如文本流等不能“入侵”的区域，所以，元素的 shape-outside 属性使用同样的剪裁路径值。举个小熊划地盘的例子我们立马可以理解这个原理：小熊绕一圈尿尿，创建出一个大致是圆形的形状，尿尿的路线就是剪裁路径，这是 clip-path 属性设置，而尿尿痕迹规划起来的区域就是形状，是 shape-outside 属性设置（外来的熊非请莫入），它和前面的尿圈是同一个东东。这两个东东，即 clip-path 属性和 shap-outside 属性，前者规范元素的形状，后者制定防“入侵”机制——它还有一些辅助手段，我们后面会谈及；其二，float 属性，这是老一代CSS就已存在的名将，专门用来做非常规布局之用，它的具体作用主要是用于定义元素浮动到左边还是右边，所以属性值可选就两个，left 和 right，说白了，float 用来设定小熊尿区固定在左边还是右边。</p>
<p>道理讲明白了。现在，我们以在文本中实现插图的方案为例具体看看怎么实现文本环绕图片的图文混排。我们需要设计一个 CSS 类选择器 .clip-pic，在其中设置图片元素的外边距、最大尺寸、剪裁路径和形状外部约束路径（这两个路径是一样的），还设定有 shape-box 属性为 margin-box，以防止文本流和图片过于亲近：</p>
<pre>
.clip-pic {
max-width: 200px;
clip-path: circle(50%);
shape-outside: circle(50%);
shape-box: margin-box;
}
</pre>
<p>我们基于某种特性的排版预设不应该是单一化的，所以，float 属性没有放在上面的选择器里，而是另外设置为两个类选择器：</p>
<pre>
.float-left { float: left; }
.float-right { float: right; }
</pre>
<p>然后在实际应用中依据情况使用左浮动还是右浮动，例如本文前面部分的大概排版结构：</p>
<div id="player" class="clip-pic float-right"></div>
<pre>
<img <txt-red>class="clip-pic float-left"</txt-red> src="图片地址" alt="" />
<p>文本段落一</p>
<img <txt-red>class="clip-pic float-right"</txt-red> src="图片地址" alt="" />
<p>文本段落二</p>
<p>文本段落三</p>
</pre>
<p>shape-outside 属性兼容性还不错，现代浏览器内核从较早的版本就已实现对它的支持，不过有一个很大的遗憾：对 path() 路径函数到目前止还没有哪一个浏览器可以实现，全都停留在 rect()、circle()、ellipse()、polygon() 等这几个基本 SVG 图形函数之上。</p>
`;
tz.text(text, wz);
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1467670634'});
tz.add('img', '', 'rot-ani', {
src: 'https://638183.freep.cn/638183/small/ytji_133877216020393750.png'
}).to('player').style('cursor: pointer').playmp3();
</script> 此前介绍过 shape-outside 属性：
CSS属性 shape-outside 用法举例 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
谢谢黑黑老师辛苦，学习了！{:4_190:} 梦江南 发表于 2025-11-1 12:28
谢谢黑黑老师辛苦，学习了！
不辛苦，就是钱少买不起新纸，在垃圾回收站淘宝淘到了几捆破纸，将就着用用{:4_170:} 马黑黑 发表于 2025-11-1 12:45
不辛苦，就是钱少买不起新纸，在垃圾回收站淘宝淘到了几捆破纸，将就着用用
黑黑老师，这是古董宝啊！价值连城呢！{:4_189:} 总觉很有用，但又用不来{:4_201:} 谢谢马老师，有了CSS shape-outside 属性，就可以完美实现图文混排了{:4_174:} 杨帆 发表于 2025-11-1 15:07
谢谢马老师，有了CSS shape-outside 属性，就可以完美实现图文混排了
{:4_190:} 樵歌 发表于 2025-11-1 13:43
总觉很有用，但又用不来
叫 @小辣椒 封装一下 梦江南 发表于 2025-11-1 13:28
黑黑老师，这是古董宝啊！价值连城呢！
是不是啊？俺才花了六角钱{:4_170:} 马黑黑 发表于 2025-11-1 18:21
是不是啊？俺才花了六角钱
这种颜色的纸只有皇家才有的，民间只有草纸。垃圾回收站不识货！{:4_170:} 梦江南 发表于 2025-11-1 18:28
这种颜色的纸只有皇家才有的，民间只有草纸。垃圾回收站不识货！
那首先是皇家没落了：需要卖破旧维持生计，怪不得垃圾回收站 马黑黑 发表于 2025-11-1 12:45
不辛苦，就是钱少买不起新纸，在垃圾回收站淘宝淘到了几捆破纸，将就着用用
{:4_172:}{:4_170:} 马黑黑 发表于 2025-11-1 18:20
叫 @小辣椒 封装一下
黑黑你要注意了，要给樵哥哥多鼓励，他已经在自己慢慢学习了，樵哥哥说套用不是他自己的东西{:4_170:} 小辣椒 发表于 2025-11-1 22:09
{:4_203:} 小辣椒 发表于 2025-11-1 22:11
黑黑你要注意了，要给樵哥哥多鼓励，他已经在自己慢慢学习了，樵哥哥说套用不是他自己的东西
{:4_169:} 黑黑的讲解帖子也是文字帖子的作品呢，这个是帖子的设计很漂亮{:4_199:} 红影 发表于 2025-11-2 22:51
黑黑的讲解帖子也是文字帖子的作品呢，这个是帖子的设计很漂亮
果酱果酱 马黑黑 发表于 2025-11-1 22:22
黑黑晚上好{:4_187:} 马黑黑 发表于 2025-11-1 22:23
{:4_172:}
樵哥哥也是挺厉害的，现在会的不少了
页:
[1]
2