css:文本环绕

最新推荐文章于 2024-04-09 19:34:35 发布
最新推荐文章于 2024-04-09 19:34:35 发布
阅读量662 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34865745/article/details/112911791
版权
本文介绍了CSS的shape-outside属性如何用于控制文本环绕元素的方式，包括设置为图片、多边形等形状，使得文本能根据元素轮廓进行布局。示例展示了如何使用polygon函数创建自定义形状以及应用图片来实现文字环绕图片的效果。此特性适用于提升网页设计的创新性和用户体验。
摘要由CSDN通过智能技术生成

文本环绕方式

shape-outside 可以控制该 div 与 其同级的文字的环绕方式, 是环绕 div 的外边框, 内边框 还是 content

具体可以查看 shape-outside

文本环绕排版

shape-outside: polygon(0 0, 100% 100%, 0 100%)
让文字按照指定行形状去环绕排版.
内容效果如下:
在这里插入图片描述

文本围绕图片

shape-outside(): url(myImg.png) 可以让我们文字自动沿着图片的形状去环绕

注意: 这里面的图片必须是 带有透明度的 png类型的图片, 文字才会环绕

爱吃鸡蛋的程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现图片居中显示的文字环绕功能
qq_44366078的博客
04-25 2606
核心：利用 float 浮动属性 首先我们来看一下普通的图片文字环绕怎么实现 图片文字环绕的原理： 图片添加浮动，脱离文档流 下面的文本盒子就会往上移动 只有盒子元素才会被覆盖，文本是一个真实的dom结构不会被覆盖 看看代码实现吧 <style> div{ width: 1000px; height: 700px; border: 1px solid #000
CSS：实现文字环绕在图片周围的效果
Bule_daze的博客
05-18 4842
要想让文字环绕在图片的周围，让图片 float 就可以了；如果还想要实现文字圆形环绕图片的效果，可以使用 shape-outside: circle(); 属性。 <p>《程序员修炼之道（从小工到专家）》 <img class="left" src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_1
css+div图文环绕
笨笨的专栏
03-14 1713
css+div图文环绕 #demo{ font-size:12px; color:#333; width:550px; margin:10px 20px 0px 10px; line-height: 20px; text-indent: 24px; /*background-image:url(img/cobj.GIF); background-position: lef
css文字环绕
weixin_30260399的博客
07-13 100
html： <div class="wrap-div-topSpacer"></div> <div class="wrap-div"> <img src="image/tineng1.png" alt=""> </div> <div style="font-size: ...
css实现文字环绕
SakuraLLj的专栏
09-09 3352
给被环绕的元素添加float: left即可：<html> <head> <style type="text/css"> .div1{ float: left; width: 100px; background-color: #0f0;
纯 CSS 实现文字换行环绕效果
徐三岁的博客
03-17 679
定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被 padding 包裹的区域，在 chrome 控制台中的盒子模型图中的蓝色区域。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。shape-outside 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
CSS高级技巧:文字环绕图片
09-27
总的来说，文字环绕图片的CSS高级技巧涉及到对浮动、定位和层叠的理解。通过灵活运用这些技术，设计师可以创造出独特且引人注目的网页布局。然而，随着CSS的不断发展，我们需要不断学习新的方法和技术，以适应不断...
HTMLCSS：检查基于HTML和CSS的第二个项目
02-25
浮动布局（float）是一种早期的布局方法，通过设置元素的`float`属性为`left`或`right`，使其在容器内向左或右移动，允许其他元素环绕它。然而，随着Flexbox和Grid布局的出现，现代网页设计更多地依赖这些新工具来...
CSS让文字环绕图片显示
在线学习web前端开发教程
01-14 3906
总得来说，文字环绕图片显示的实现方式有这样两种： 通过img的 align 属性， 设置img的停靠位置，文字会环绕显示； 给img单独加一个父级div容器，设置css属性：float:left ; clear:both 设置align属性：align=‘center’ 第一种：通过img的 align 属性， 设置img的停靠位置，文字会环绕显示: <body> <div...
CSS常用文本样式总结
09-27
CSS提供的文本样式属性可以让开发者细致地调整文本的表现，从而让网页内容更加丰富和美观。下面将详细介绍CSS中常用的一些文本样式及其用法。 1. 首行缩进（text-indent）：这是最常见的文本格式化效果之一，尤其在...
文字环绕图片的css布局效果
05-14
文字环绕图片的css布局效果，实现图片右上角显示，文字在其左侧，高度超出图片的部分宽度恢复为100%宽，实现环绕效果的小demo。
文字环绕图片的布局效果(使用动态div实现)
12-12
CSS的float属性，有left，right。 那么，如果我想让图片浮在中间呢？有没有float:middle呢？ 貌似是没有勒。 最新的CSS3的分栏属性（http://www.w3.org/TR/css3-multicol/）可以让文字分栏，然后再让图片左浮右浮，以此来实现图片在中间的“假象”。 如何实现“文字环绕图片”的霸道效果呢？！！（虽然感觉很2，没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~） 答案就是，用动态div啦~ 把文字分成4块，环绕着图片。图片的大小和div的大小事先规定。再用js来计算每个div里显示多少文字。 这样，即使只有左浮右浮，也可以实现文字
文字环绕的使用-CSS入门基础（017）
虾米大王的学习历程
12-18 615
今天我们分享关于文字环绕float的内容。 在网页布局中，经常会用到图文混排。图文混排，就是文字环绕图片进行布局。 在css中，使用浮动属性float可以设置元素的周围。 语法： float:取值； float属性取值 属性值 说明 left 元素向左浮动 right 元素向右浮动 默认情况下，元素是不浮动的。上表中的属性是常用的，另外还有“none” 和“inherit”不常用，也不需要学习的。 示例代码： ...
CSS-浮动文字环绕布局、隐藏属性display、overflow、三角形制作、鼠标样式
最新发布
好看的皮囊千篇一律，有趣的灵魂万里挑一。
04-09 1707
CSS文字环绕布局是指在网页中让文字环绕在图片或其他元素周围的布局方式。这通常通过CSS中的float属性来实现。你可以将图片设置为`float: left;`或`float: right;`，然后在文本元素中使用`clear`属性来清除浮动，以确保文字不会覆盖图片。另外，你也可以使用CSS中的`shape-outside`属性来定义文字环绕的形状，使文字围绕着指定的形状排列。这样可以实现更加灵活和复杂的文字环绕效果。
HTML/CSS实现文字环绕图片布局
weixin_46100406的博客
03-27 2926
1.CSS 利用float: left <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa{ width: 500px } ...
css3环绕字,css3实现元素环绕中心点布局
weixin_35048266的博客
08-03 283
效果如图：代码实现：*{margin: 0;padding: 0;box-sizing: border-box;}.surround-box,.center-point{position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;margin-left: -10px;margin-top: -10px;border-radiu...
这样的文字环绕效果，你绝对没有见过！
DuyiZiChen的博客
06-22 1411
图片环绕文字大家太熟悉了，这是初学css必须经历的效果之一。 但是你有没有想过让文字按照我们想要的方式进行环绕呢？ 我是渡一子辰老师，今天就来教大家实现这种奇妙的环绕方式。
文字环绕布局
qq_41994396的博客
05-05 556
基本图形函数circle()就是沿着圆形区域进行环绕、ellipse()就是沿着椭圆形区域进行环绕、polygon()就是沿着自定义的折线区域进行环绕，下面是结合clip-path属性（使用裁剪方式创建元素的可显示区域）完成的一个围绕三角形区域进行的文字环绕。利用CSS Exclusion模块可以实现类似于Word文档的方式，可以让文字四周环绕元素，不过CSS Exclusion模块目前浏览器的支持程度还不高，只能针对IE10+的浏览器起作用。CSS Shapes是一个CSS模块，用于定义几何形状。
CSS 学习笔记 - 形状/环绕
灵台方寸山斜月三星洞
09-03 334
CSS 学习笔记 - 形状形状参考资料 形状 clip-path 矢量形状 shape-outside 定义外边，控制文字环绕。支持带透明的PNG。 参考资料 MDN：CSS_Shapes 形状 MDN：CSS_Masking 遮罩
CSS浮动详解：文本环绕与布局应用
浮动是CSS定位的一个关键概念，起源于印刷设计中的文本环绕效果。理解浮动有助于创建复杂的网页布局和实现灵活的内容调整。 浮动（Float）是CSS中用于元素定位的属性，它允许元素在页面上浮动，以便其他内容可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值