设计师：把这个效果做一下（文字环绕）。

前端小张同学2024-04-14 13:20

大家好，我是前端小张同学，今天给大家带来一个css属性的问题，文字环绕的效果

1：效果

疑问

想实现这个效果，可能大家第一想法会想到是浮动将图片浮动到右侧，但问题是我们怎么让图片到底下来，并且让文字能填充上面呢？

接下来给大家带来一个css 属性 shape-outside，大家可以去看MDN的官方文档。

官网解释

shape-outside CSS 属性定义一个形状（可以是非矩形），相邻的内联内容应围绕该形状进行环绕。默认情况下，内联内容环绕其边距框; shape-outside 提供了一种自定义此换行的方法，使得将文本换行在复杂对象而不是简单框周围成为可能。

我.... ，听不懂，听不懂，烦死了~~

我的理解：可以将定义一处内容，使文档上的内容围绕着它来进行环绕显示。

上方的例子就是定义一块区域，该区域显示在图片里，而使用外边距将图片位移到下方，使文字围绕着图片进行显示。

1：shape-outside: inset

该属性定义了一个矩形的围绕区域，分别有四个值，分别为上右下左的偏移量，当你将值设置好后，你就会发现，离你进的区域不会被文字填充，它将会围绕着进行渲染。

效果代码

css 复制代码

  img {
        float: right;
        width: 448px;
        height: 300px;
        margin-right: 1em;
        shape-outside: inset(230px 37px 0px 10px);
        margin-top: 250px;
      }

2：shape-outside: circle

可以帮助你绘制一个圆形的环绕区域，进行文字渲染，它的参数为

css 复制代码

shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

以上就是文字环绕的一些内容，还有 ellipse 等可以大家自己去学习一下，今天的内容就说到这，下次见。

下方有前端的技术交流群，希望大家可以积极参与进来，一起学习，一起进步，好的，我是前端小张同学期待你的关注。