大家好,我是前端小张同学,今天给大家带来一个css属性的问题,文字环绕
的效果
1:效果
疑问
想实现这个效果,可能大家第一想法会想到是 浮动 将 图片浮动到 右侧,但问题是我们怎么让图片到底下来,并且让文字能填充上面呢?
接下来给大家带来一个css 属性 shape-outside
,大家可以去看MDN的官方文档。
官网解释
shape-outside
CSS 属性定义一个形状(可以是非矩形),相邻的内联内容应围绕该形状进行环绕。默认情况下,内联内容环绕其边距框; shape-outside
提供了一种自定义此换行的方法,使得将文本换行在复杂对象而不是简单框周围成为可能。
我.... ,听不懂,听不懂,烦死了~~
我的理解:可以将定义一处内容,使文档上的内容围绕着它来进行环绕显示。
上方的例子就是 定义一块区域,该区域显示在 图片里,而使用外边距将图片位移到下方,使文字围绕着图片进行显示。
1:shape-outside: inset
该属性定义了一个矩形的围绕区域,分别有四个值,分别为 上 右 下 左的偏移量,当你将值设置好后,你就会发现,离你进的区域不会被文字填充,它将会围绕着进行渲染。
效果代码
img {
float: right;
width: 448px;
height: 300px;
margin-right: 1em;
shape-outside: inset(230px 37px 0px 10px);
margin-top: 250px;
}
2:shape-outside: circle
可以帮助你绘制一个圆形的环绕区域,进行文字渲染,它的参数为
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
以上就是文字环绕的一些内容,还有 ellipse
等 可以大家自己去学习一下,今天的内容就说到这,下次见。
下方有前端的技术交流群
,希望大家可以积极参与进来,一起学习,一起进步,好的,我是前端小张同学 期待你的关注。