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

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

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

相关推荐
sasaraku.12 分钟前
serviceWorker缓存资源
前端
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw54 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app