css不规则的文本环绕

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>不规则的文本环绕</title><style>.box img {float: left;margin-right: 1em;border-radius: 50%;object-fit: cover;/* shape-outside 设置元素的外形形状,使文本或其他内容能够沿着该外形形状进行环绕布局。在 shape-outside 属性中,可以使用 circle() 函数来创建一个圆形形状。circle() 函数接受 3 个参数,分别是圆心的水平位置、圆心的垂直位置和半径。circle(50% at 50% 50%) 表示一个以元素中心为圆心、半径为元素宽度的一半的圆形。其中的 50% 表示圆心在水平方向上位于元素宽度的中心位置,50% 表示圆心在垂直方向上位于元素高度的中心位置。 */shape-outside: circle(50% at 50% 50%);}.box span {line-height: 2;}</style></head><body><div class="box"><img src="../assets/img/猫.jpg" alt="" width="300px" height="300px" /><span>家猫,久已被人类驯养的一种食肉类动物,通常被认为是一个独立的种,虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的,有一些变种,主要的区别在于皮毛的长短,体形以及尾的有无迎猫,为其食田鼠也。——《礼记》家猫,久已被人类驯养的一种食肉类动物,通常被认为是一个独立的种,虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的,有一些变种,主要的区别在于皮毛的长短,体形以及尾的有无迎猫,为其食田鼠也。——《礼记》家猫,久已被人类驯养的一种食肉类动物,通常被认为是一个独立的种,虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的,有一些变种,主要的区别在于皮毛的长短,体形以及尾的有无迎猫,为其食田鼠也。——《礼记》家猫,久已被人类驯养的一种食肉类动物,通常被认为是一个独立的种,虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的,有一些变种,主要的区别在于皮毛的长短,体形以及尾的有无迎猫,为其食田鼠也。——《礼记》</span></div></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flyway使用配置参数和注意事项介绍

文章目录 业务场景参数介绍initSqlsbaselineOnMigratebaselineVersiontargetvalidateOnMigrate SQL注意事项 业务场景 对于生产环境&#xff0c;随着项目版本迭代&#xff0c;数据库结构也会变动。如果一个项目在多个地方实施部署&#xff0c;且版本不一致&#xff0c;就需要一…

触发器和存储过程的区别

目录 触发器&#xff08;Trigger&#xff09; 定义和用途&#xff1a; 执行方式&#xff1a; 作用范围&#xff1a; 参数传递&#xff1a; 示例&#xff1a; 存储过程&#xff08;Stored Procedure&#xff09; 定义和用途&#xff1a; 执行方式&#xff1a; 作用范围…

CSS之粘性定位

让我为大家介绍一下粘性定位吧&#xff01; 大家应该都了解过绝对定位&#xff0c;它是相对于父级定位 那么粘性定位相对于谁呢&#xff1f; 它相对于overflow:hidden; 如果没找到就会跟fixed固定定位一样&#xff0c;相对于视口 <!DOCTYPE html> <html lang"en…

rust 引用/mut 的所有权

在任意给定时间&#xff0c;要么 只能有一个可变引用&#xff0c;要么 只能有多个不可变引用。 不可变引用&#xff08;shared reference&#xff09;实现了Copy trait&#xff0c;不会发生所有权转移可变引用&#xff08;mutable reference&#xff09;未实现&#xff0c;会发…

C++ 利用容器适配器,仿函数实现栈,队列,优先级队列(堆),反向迭代器,deque的介绍与底层

C 利用容器适配器,仿函数实现栈,队列,优先级队列【堆】,反向迭代器,deque的介绍与底层 一.容器适配器的介绍二.利用容器适配器实现栈和队列1.stack2.queue 三.仿函数介绍1.什么是仿函数2.仿函数的使用3.函数指针的使用1.函数指针的用处2.利用函数指针完成回调3.利用仿函数完成回…

Compose | UI组件(二) | Text() 文本组件

文章目录 Text() 简介Text() 参数说明Text() 显示文字fontSize 文字大小textAlign 文字对齐方式style 文字样式fontFamily 文字字体AnnotatedString 多样式文字maxLines 设置文本单行显示SelectionContainer 选中文字 总结 Text() 简介 显示文字的组件 Text() 参数说明 Comp…

免 费 小程序商城搭建之b2b2c o2o 多商家入驻商城 直播带货商城 电子商务b2b2c o2o 多商家入驻商城 直播带货商城 电子商务

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…

cg插画设计行业怎么样,如何学习插画设计

插画设计行业是一个充满创意和艺术性的行业&#xff0c;随着数字化时代的不断发展&#xff0c;cg插画的应用范围越来越广泛&#xff0c;市场需求也在逐年增长。以下是一些关于acg插画设计行业的现状和发展趋势&#xff1a; 市场需求不断增长&#xff1a;随着广告、媒体、影视、…

HCIA学习作业二

要求&#xff1a;基于192.168.1.0/24进行合理划分&#xff0c;要求全网通 [AR3]display ip interface brief [AR3]display ip routing-table [AR1]display ip interface brief [AR1]display ip routing-table [AR2]display ip interface brief [AR2]display ip routing-tab…

Element-plus修改样式

场景 通过样式穿透修改前端element组件样式。 实现 1.button按钮 ::v-deep .el-button { border-radius: 0; border: 0; background-color: rgba(0, 194, 255) !important; color: black; } 2.form表单 ::v-deep .el-form { text-align: left; .el-form-item { text-align: lef…

Hadoop3.x源码解析

文章目录 一、RPC通信原理解析1、概要2、代码demo 二、NameNode启动源码解析1、概述2、启动9870端口服务3、加载镜像文件和编辑日志4、初始化NN的RPC服务端5、NN启动资源检查6、NN对心跳超时判断7、安全模式 三、DataNode启动源码解析1、概述2、初始化DataXceiverServer3、初始…

C# 在矩形内获取一个指定大小的矩形(两个矩形的中心点是重合的)

C# 在矩形内获取一个指定大小的矩形&#xff08;两个矩形的中心点是重合的&#xff09; 示例1&#xff1a; using System.Drawing;public class RectangleUtils {public static Rectangle GetInnerRectangle(Rectangle outerRectangle, Size innerSize){// 计算内部矩形的左上…

MySQL的数据锁表(data_locks 表)

data_locks 表显示了持有和请求的数据锁。关于哪些锁请求被哪些持有的锁阻塞的信息。 示例数据锁信息&#xff1a; mysql> SELECT * FROM performance_schema.data_locks\G *************************** 1. row ***************************ENGINE: INNODBENGINE_LOCK_ID:…

《WebKit 技术内幕》学习之十一(2):多媒体

2 视频 2.1 HTML5视频 在HTML5规范定义中&#xff0c;Web开发者可以使用“video”元素来播放视频资源。视频中有个重要的问题就是视频编码格式&#xff0c;对此&#xff0c;目前标准中包含了三种编码格式&#xff0c;它们分别是Ogg、MPEG4和WebM。其中Ogg是由Xiph.org组织开…

PyQt中的信号/槽以及纯python实现信号/槽设计模式

1.信号与槽的基本概念 在PyQt中&#xff0c;信号是一种对象间通信的机制。当某个特定事件发生时&#xff0c;一个信号被发射。槽是接收信号的方法&#xff0c;当信号被发射时&#xff0c;与之连接的槽会被调用。这种机制使得不同部分的代码能够松耦合地交流。 2.PyQt中的信号与…

【模拟算法系列】详解5道题

本文讲解模拟算法系列的5道经典题&#xff0c;在讲解题目的同时提供AC代码&#xff0c;点击题目即可打开对应OJ链接 目录 模拟算法的介绍 1、替换所有的问号 2、提莫攻击 3、 Z 字形变换 4、外观数列 5、数青蛙 模拟算法的介绍 题目中明确告诉你要干什么&#xff0c;思路…

C++ //练习 3.3 请说明string类的输入运算符和getline函数分别是如何处理空白字符的。

C Primer&#xff08;第5版&#xff09; 练习 3.3 练习 3.3 请说明string类的输入运算符和getline函数分别是如何处理空白字符的。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释 cin读取并忽略有效字符之前所有的空白字符&…

打开文件:内核做了什么

一.文件描述符本质 文件描述符的是一个非负整数&#xff0c;它是操作系统内核用来标识和管理打开文件的抽象概念。在 Linux 和其他类 Unix 操作系统中&#xff0c;几乎所有与文件相关的操作都是通过文件描述符来进行的。 文件描述符是操作系统内核为每个进程维护的一个表&…

ChatGPT 和文心一言 | 两大AI助手哪个更胜一筹

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…

Web开发4:单元测试

在Web开发中&#xff0c;单元测试是一种重要的开发实践&#xff0c;它可以帮助我们确保代码的质量和可靠性。通过编写和运行单元测试&#xff0c;我们可以验证代码的正确性&#xff0c;减少错误和缺陷&#xff0c;并提高代码的可维护性。本文将介绍单元测试的概念、好处以及如何…