实现 word 中的图片文字环绕效果
·
Yin灏
假设有这样的 HTML 页面结构：
<main>
<h1>百度百科 JavaScript</h1>
<article>
<img
width="200"
src="./undraw_static_assets_rpm6.svg"
alt="javascript css html"
/>
<p>
JavaScript（简称“JS”）
是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript
基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。JavaScript在1995年由Netscape公司的Brendan
Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript
。截至
2012年，所有浏览器都完整的支持ECMAScript5.1，旧版本的浏览器至少支持ECMAScript
3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript
2015，但通常被称为ECMAScript 6 或者ES6。
</p>
</article>
</main>
<article> 元素的语义是代表一篇文章，里边分别加载了一张图片和一段文字，默认图片和文字是上下排列的。如果想让图片靠左对齐，文字段落沿着图片的边界进行环绕，需要进行这些设置：
- 给 img 标签设置 float: left，让它浮动到左边，此时图片的边界是个矩形区域，文字会规整的进行环绕。
- 下边重点来了，给 img 标签设置一个 shape-outside 属性，它是用来自定义图片的边界的，可以使用 css 中的 circle()、 ellipse()、polygon() 或 path() 来绘制圆形、椭圆、多边形或路径边界，另外它还支持使用自定义图片，根据图片的有颜色的部分来确定边界。
那么这里我们就使用同样的图片来设置边界，使用 url() 加载相同的图片作为 shape-outside 属性值：
img {
shape-outside: url(./undraw_static_assets_rpm6.svg);
}
然后再设置一下边距和偏移，把图片调整到合适的位置：
img {
margin: 0 2rem;
transform: translateX(-2rem);
}