CSS新特性之shapes环绕文字？

Halle！ Halle！ 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 373平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-04-11 14:08:36 发布 373 阅读 AI 写同款· GEO 优化 ›
【高频考点精讲】CSS shape-outside实战：如何让文字环绕不规则图片排列？ 🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。前端布局中遇到不规则图片时，传统的矩形环绕总显得生硬。今天全栈老李带你玩转CSS的shape-outside属性，让文字像溪流绕过山石般自然流动。 阅读详情

CSS新特性之shapes环绕文字？

CSS Shapes 布局可以实现不规则的文字环绕效果，需要和浮动配合使用。

属性有：

shape-outside：属性值有margin-box，padding-box，content-box指文字是绕图型的margin还是padding还是content。

clip-path： 属性值有circle（）圆，polygon(x y,x1 y1,x2 y2);三角形，指将原盒子裁剪成属性值，即自定义形状。自定义形状后，shape-outside属性值也要为相同坐标，来让文字环绕裁剪后的图形。

shape-margin：文字环绕时与形状的外边距距离，值为px

收录于
前端大集合

当前文章被收录于：

前端大集合
112 篇文章 0 人学习

就html、css、JavaScript等零散的东西。本人已转行，因而以前无聊摘录的笔记作统一处理。

订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS布局与设备适配的艺术 本文深入探讨了CSS中高级布局技术，如CSS Shapes布局以及响应式设计中@media规则的运用。从圆形容器内的文字排版到不同设备的适配策略，文章详细介绍了如何通过CSS特性改善网页的视觉效果和用户体验。 阅读详情

相关推荐

文字环绕图片的css布局效果

文字环绕图片的css布局效果，实现图片右上角显示，文字在其左侧，高度超出图片的部分宽度恢复为100%宽，实现环绕效果的小demo。

CSS shapes布局教程

概述 本文详细介绍CSS Shapes布局，它能打破web中矩形盒模型的限制，使文字能环绕基础图形，PNG，SVG图像，以及渐变图形的布局效果； 兼容性较好，大部分高版本浏览器已支持。 Shapes布局相关属性: shape-outside shape-margin shape-image-threshold shape-outside shape-outside是不规则形状环绕布局的核心，支持的...

pinmingle的博客 683

Python入门之机器学习（非常详细）篇幅拉满，一般人看不完！

什么是机器学习？监督学习 supervised learning;非监督学习 unsupervised learning;半监督学习 semi-supervised learning;强化学习 reinforcement learning;监督学习是不断向计算机提供数据（特征），并告诉计算机对应的值（标签），最后通过大量的数据，让计算机自己学会判断和识别。例如Google Photo，你在APP中输入狗，这时就会弹出与狗相关的图片，这背后使用的算法就是监督学习。

xiaolinyui的博客 2万+

CSS3干货20：CSS3中的形状（shape）及其应用

一、形状 Shape 形状 Shape 的出现，打破了传统 CSS 中，只有矩形形状的尴尬，可以让我们的形状多元化。 用以下结构和样式为基础案例说明： <div class="txtBox"> <div class="txtBox_content"> <p> 小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。 </p> <p>

九天翔龙的技术博客 1650

Python使用netmiko配置华为交换机

1.netmiko就是专门为网络设备做的模块，非常强大。1.更适合网络设备的自动化运维模块。2、批量配置变更、备份。1.安装netmiko。2. 创建SSH连接。一、netmiko介绍。

博然的宝藏库 2795

海思MPP平台千兆以太网驱动集成与测试指南

千兆以太网（GE）是嵌入式视觉系统中音视频流传输与边缘控制的核心物理接口，其底层驱动需兼顾DMA高效调度、中断实时响应与PHY链路稳定性。在Linux嵌入式环境中，GE驱动通常基于net_device框架实现，并深度耦合于SoC专用媒体处理平台（如海思MPP），通过硬件抽象层（HAL）屏蔽寄存器操作，提供零拷贝、RGMII时序适配、描述符环管理等关键能力。技术价值体现在降低CPU负载、保障1080p@30fps实时推流、支持ONVIF/RTSP协议交互及固件远程升级。典型应用场景包括网络摄像机（IPC）、A

weixin_42599908的博客 89

wps或word中文字环绕方式，四周型和紧密型的区别？

1 文字环绕方式全是针对图文结合的排版方式而言 2 我们先要弄清楚两个概念，在word里的任何一个图都有两个外围框，一个是调整框，就是我们插入图后在图四周看到的六个圆形控制点，一个是图案自身的外轮廓。 弄清了这两个概念，就可以分辨出四周型和密集型的区别了： 我们先用word里的插入自选图型来画一个自选图，比如一个五角星，为什么要用自选图而不是插入现成一个图画文件呢？ 这两种情况是有区别的，

wyyEileen的专栏 1万+

Caffeine：为每个元素动态设置过期时间

Caffeine利用expireAfter方法实现为每个元素动态设置过期时间

大数据开发、JAVA开发、人工智能AI 1万+

利用CSS实现任意形状的文字环绕

利用CSS的shape-outside属性来实现任意形状的文字环绕 实现效果如下图所示 shape-outside CSS的shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中 详情可以参考以下网站： https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-out

weixin_44286392的博客 3163

如何让 Mac mini 24小时不休眠运行 OpenClaw

如果 OpenClaw 每 5-10 分钟自动退出，launchd 连续 4 次快速重启后会判定为崩溃循环并卸载服务。：方案一（pmset）+ 方案三（launchd）组合使用，既防止系统休眠，又保证 OpenClaw 开机自启和崩溃自动恢复。：caffeinate 只在进程运行期间有效，终端关闭或进程结束后系统恢复正常睡眠策略。这条命令会自动创建 launchd plist 并启用服务，是最推荐的方式。替换为你的实际用户名路径，Node.js 路径也要改成你自己的。确保 plist 中有。

Maynor的博客 2204

《AgentScope-Java 深入浅出教程》第1章 AgentScope-Java 简介

AgentScope-Java 是一个面向智能体的编程框架，专门用于构建基于大语言模型（LLM）的 AI 应用程序。│ 你的业务应用 ││ AgentScope-Java 框架 ││ │ 智能体 │ │ 工具 │ │ 记忆 │ │ 模型 │ ││ LLM 服务 (DashScope/OpenAI/...) │能力说明类比ReAct 推理让智能体能够"思考"并"行动"就像人类思考后再做事工具调用让智能体能够执行外部操作就像人使用计算器、搜索引擎记忆管理让智能体能够记住对话历史。

步子哥的博客 592

CSS新特性之shapes

CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。 shape-outside <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新特性之Shapes（环绕文字）</title> <style> #parent{ width: 300px;

MW 271

大数据知识面试题-通用（2026版）

序列号 内容 链接 1 大数据知识面试题-通用（2022版） 待续… 2 大数据知识面试题-Hadoop（2022版） 待续… 3 大数据知识面试题-MapReduce和yarn（2022版） 待续… 4 大数据知识面试题-Zookeepr （2022版） 待续… 5 大数据知识面试题-Hive （2022版） 待续… 6 大数据知识面试题-Flume（2022版） 待续… 7 大数据知识面试题-Hbase（2022版） 待续… 8 大数据知识面试题-sqoop（....

拉格朗日的学习笔记 2万+

CSS架构与CSS新特性（自定义属性、shapes）

CSS架构 在一个大型项目中，由于页面过多，导致css代码难以维护和开发。所以css架构可以帮助我们解决文件管理与文件划分等问题。 首先要对css进行模块化处理，一个模块负责一类操作行为。可利用sass或less来实现。 CSS新特性 1.自定义属性 CSS自定义属性（也称为’'css变量），在目前所有的现代浏览器中都得到了支持。 1.定义与使用 :root{ --color:red; --number:100px; --size:50px; } #box{ background:var(--co

weixin_43791370的博客 270

SAP FI 会计科目表（COA）可直接套用配置模板

摘要：本文提供了SAP S/4HANA环境下可直接套用的会计科目表(COA)配置模板，包含科目编码规则、号段规划、科目组设置等核心内容。模板采用10位数字编码，按资产(1000)、负债(2000)、权益(3000)、成本(4000)、收入(5000)、费用(6000)六大类划分号段，并预设科目组控制字段状态。适用于集团/单一公司、国内/跨国企业场景，支持多表架构映射，配置完成后可通过事务码SAKO验证科目清单。模板遵循"前4位固定一级科目"原则，企业可根据行业特性调整明细科目。

金牌架构师 267

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

HTML-CSS（六十七）CSS新特性

自定义属性 ​ CSS自定义属性（也称为‘css变量’），在目前所有的现代浏览器中都得到了支持。(之前碰到过less@、sass$) css的自定义属性写法： 定义 ：root{–name：属性值} （不一定限制在：root当中，也可以在其他选择器中） 使用 选择器{ 属性名：var（–name） } 计算和单位： 如果在定义时，就给属性值设置单位，那么在引用的时候是可以不写单位的。 但是如果在设置属性值时不写单位，在引用时用拼接的形式写单位。那么不会被识别出来的 我们可

weixin_44730244的博客 223

SAP B1中文培訓教材_SDK

公司内部培训资料，对开发工具 ，DIAPI， UIAPI，Add-ON有详细解说

HTML5和css3

HTML５一、1. html5 与 xhtml的区别2. strong和b，em和i 的区别3.引用标签4. 嵌套页面 iframe 一、 1. html5 与 xhtml的区别 1.DOCTYPE文档及编码 html5：<!DOCTYPE html> 比较简单 <meta charset="utf-8"> xhtml：<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http

sam80000的博客 679

WINCC7.3破解文件

WINCC7.3硬件够破解文件，有需要的下载！WINCC7.3硬件够破解文件，有需要的下载！

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

CSS第十章 CSS架构与文件组织/CSS新特性/CSS与JS结合

CSS一、CSS架构与文件组织不根据框架划分的CSS架构根据框架划分的CSS架构二、CSS新特性1. 自定义属性(CSS变量)2. Shapesshape-outsideclip-pathshape-margin 在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分等问题。 首先要对CSS进行模块化处理，一个模块负责一类操作。可利用Sass或Less来实现。 一、CSS架构与文件组织 不根据框架划分的CSS架构 例子： 一个项目可划分为以下文件夹(

晓葉斑比 495

HTML+CSS

Sass和Less Sass和Less都属于CSS预处理器，CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，如：变量、语句、函数、继承等概念。将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 官网地址： http://lesscss.org/ VSCode插件：Easy LESS 官网地址： https://sass-lang.com/ VSCode插件：Easy Sass Sass和Less

qq_45399931的博客 228

HTML5、CSS3、ES6新特性总结

HTML5 提供了一些新的表单输入类型和属性（例如日期选择、邮箱验证、自动完成等），以及表单验证 API，使得表单操作更加方便和强大，表单输入更加简洁和语义化。CSS3 引入了过渡（transition）和动画（animation）效果，使得在没有使用 JavaScript 的情况下，可以实现页面元素的平滑过渡和动态效果。

Vivien_CC的博客 915

奇妙的 CSS shapes(CSS图形)

CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。 CSS3之前，我们能做的只有矩...

weixin_30835933的博客 98

CSS3学习小结

这几日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS实现。看到人家实现的实在是太棒了，就想到该学学CSS了。 @support属性 @support:用来查询浏览器是否支持css新特性。目前各大浏览器对@support的支持情况：现代浏览器除了IE系列之外，都对@supports有很强的的支持性，甚至在移...

weixin_34324081的博客 131

不规则混排实现（实现图文环绕的效果）

图文环绕方式的实现：     法一：（将图像一幅图像用Photoshop切割成若干个小的图片，然后设置小图片浮动显示） ”text/css”> .image{ float:left; clear:left; margin-right:2px; padding:0; } ”main”> ”image”>”../i

adobe1992 2269

css实现文字环绕

给被环绕的元素添加float: left即可：<html> <head> <style type="text/css"> .div1{ float: left; width: 100px; background-color: #0f0;

SakuraLLj的专栏 3524

【CSS】用shape完美实现文字环绕 circle、ellipse、polygon

shape简介shape有一下两个属性： 1.shape-outside：让文字从图片外部开始环绕，以及设置图片的形状 2.shape-inside：设置图片的内部形状，目前基本不支持shape关键字如下（类似box-sizing）： margin-box content-box border-box padding-box 基本形状用以下函数来定义： circle(size a

码婆Doph 7226
上一篇： CSS新特性之自定义属性？
下一篇： 元素在盒子里垂直水平居中？
点赞 0
评论 0
书签 书签 2
Halle！
Halle！
博客等级 码龄7年 303粉丝 133原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值