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

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

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

相关推荐
前端架构师-老李4 分钟前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据5 分钟前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_8 分钟前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian17 分钟前
前端+AI:CSS3(二)
前端·css·css3
JiKun25 分钟前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店30 分钟前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
慧一居士37 分钟前
ES6(ECMAScript 2015)功能介绍,使用场景,对应功能点完整使用示例
前端
吃饺子不吃馅1 小时前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
恋猫de小郭1 小时前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响?
android·前端·flutter
muyouking111 小时前
Tailwind CSS 小白快速入门速查手册
前端·css·css3