设计师:把这个效果做一下(文字环绕)。

大家好,我是前端小张同学,今天给大家带来一个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 等 可以大家自己去学习一下,今天的内容就说到这,下次见。

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

相关推荐
Cacciatore->几秒前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~2 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo3 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末21 分钟前
React——基础
前端·react.js·前端框架
aklry33 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9340 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子41 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982441 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug44 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo44 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos