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

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

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

相关推荐
汉得数字平台16 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹23 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互