shape-outside 最后再来看看 shape-outside，另外一个有趣的有能力生成几何图形的属性。 shape-outside 是啥？...; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box;.../* Function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside...不，不是的，看看 float 和 加上shape-outside 后的对比： ? 看出区别了吗？使用了 shape-outside ，真正的实现了文字根据图形的轮廓，在其周围排列。 ?...shape-outside 的本质 划重点，划重点，划重点。 所以，shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让文字能排列在这些被裁剪区域之内。
妙用 shape-outside 实现隔行错位布局 有的！在 CSS 中，有一个神奇的元素能够让元素以非直线形式排布。它就是 shape-outside！...如果你对 shape-outside 不太了解，也可以先看看我的这篇文章 -- 奇妙的 CSS shapes shape-outside 是 CSS 中的一个属性，用于控制元素的浮动方式。...height: 160px; shape-outside: circle(80px at 80px 80px); float: left; } 注意，上面 .shape-outside...如此，将会产生一种图文混排的效果： CodePen Demo -- 图文混排 shape-outside 总得来说，shape-outside 有两个核心特点： shape-outside 属性仅在元素定义了...float 属性且不为 none 时才会生效 它能够实现了文字根据图形的轮廓，在其周围排列 shape-outside 的本质 划重点，划重点，划重点。
对于任何渴望了解如何使用 shape-outside、 shape-margin 和 shape-image-threshold 等属性的人来说，这篇文章是理想的入门读物。...当你需要内容在形状周围流动时，使用 shape-outside 属性。你必须向左或者向右浮动元素，以便 shape-outside 产生效果。...为了实现这种 z 型设计，我选择将两个 1 x 1 px 的微小图像，放置到使用 shape-outside 的两个大的形状图像上。...不过，虽然 shape-inside（暂时）不可用，这并不代表我用 shape-outside 创建不出类似的结果。 ? 左：另一个可展示但普通的设计。...; shape-outside: url('alpha.png'); shape-margin: 1rem;} 你可能已经注意到我的两个图像都包含了我顺时针旋转了 10 度的元素。
shape-outside 最后再来看看 shape-outside，另外一个有趣的有能力生成几何图形的属性。 shape-outside 是啥？...先看看它的 API，看上去貌似很复杂： { /* Keyword values */ shape-outside: none; shape-outside: margin-box...; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box;.../* Function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside...shape-outside 的本质 划重点，划重点，划重点。 所以，shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让文字能排列在这些被裁剪区域之内。
声明图形 我们需要使用shape-outside 属性声明不规则图形。当前， shape-outside 属性只能被应用于浮动元素，并且只能应用于块级元素。...提醒 现在，shape-outside 属性只作用域浮动的元素，并且仅限制于在块级元素上应用。使用这些属性定义的元素，其周围的文本将依赖于图形形状排布。...实例-使用shape-outside 创建环绕于自定义形状的浮动文本 我们从一个简单的例子开始。在实例中我们将创建一个自定义图形，并且内置文本流，最终效果图如下（文章末尾提供实例下载链接）： ?...所以，为了达到预期效果，我们需要设置clip-path 属性，并且设置其范围和shape-outside 属性相同。...我们可以设置shape-outside 属性值为图片URI，浏览器就会自动依据图片来绘制不规则图形。 ? 图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。
图像文本环绕 CSS 中的 shape-outside 属性是一个非常有用且强大的工具，它允许设计师和开发者控制内容如何围绕一个浮动元素（通常是图像或图形）进行排列。...shape-outside 属性定义了内容将围绕其排列的形状。它通常与 float 属性一起使用，因为只有浮动的元素才会有内容围绕它。 可用的值: none: 默认值。...举例 使用椭圆: .element { float: left; shape-outside: ellipse(50% 50% at 50% 50%); } 使用多边形: .element...: left; shape-outside: url('path-to-image.png'); } 实际应用 假设你有一个圆形图像，您希望文本围绕它排列，同时尊重圆的边界。...没有 shape-outside，文本只会围绕图像的矩形边界盒子进行排列。但使用 shape-outside，可以使文本平滑地围绕圆形图像进行排列，从而得到更加视觉上吸引人的布局。
5、clip-path / shape-outside clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。类似的裁剪还有 svg 的 clipPath。...有的，使用 shape-outside 属性 shape-outside 定义了一个可以是 非矩形的形状，相邻的内联内容应围绕该形状进行包裹。...默认情况下，内联内容包围其矩形边距; 默认矩形环绕 clip-path: none; shape-outside: none ?...圆形环绕 clip-path: circle(40%); shape-outside: circle(40%); 椭圆环绕 clip-path: ellipse(130px 140px at 10%...20%); shape-outside: ellipse(130px 140px at 20% 20%); ?
6. shape-outside shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。...默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。它采用与clip-path相同的值。...clip-path定义用户如何查看元素，shape-outside定义其他HTML元素如何查看元素。 ? 资源:MDN。
图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。...它还有助于定义文本流动的区域： .any-shape { width: 300px; float: left; shape-outside: circle(50%); } shape-outside...默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
包括属性 `shape-outside、shape-margin 和 shape-image-threshold` shape-outside 属性不久前已经开发完毕。...例如，你可以创建一个以页面左上角为中心的圆： .circle { shape-outside: circle(50px at 10px 10px); } 可以创建如三角形、梯形、多边形等。....triangle { shape-outside: triangle(50px, 0, 50px, 100px, 0, 100px); } CSS Shapes其他新功能： shape-inside
可以团结人——毛泽东 从这里看到的：https://css-tricks.com/print-magazine-layouts-converted-to-web-layouts/ 效果如下： 用到了shape-outside...content="IE=edge"> shape-outside... .img { shape-outside: url("/img/noBackHead.png");
.aspect-ratio-box { aspect-ratio: 16/9; } 49. shape-outside实现文本环绕 使用shape-outside属性使文本围绕指定形状，实现更动态的布局....shape-wrap { float: left; width: 150px; height: 150px; shape-outside: circle(50%); }....shape { shape-outside: circle(50%); } 64. 属性选择器用于子字符串匹配 使用*=操作符的属性选择器进行子字符串匹配。...CSS形状实现文本环绕 使用shape-outside结合polygon()函数精确地控制文本围绕不规则形状的布局。....text-wrap { shape-outside: polygon(0 0, 100% 0, 100% 100%); } 69. 自定义鼠标样式 使用cursor属性更改鼠标样式。
用于文本换行的 shape-outside 使用 shape-outside 属性使文本环绕指定形状，从而实现更动态的布局。...CSS 形状 使用shape-outside 属性创建有趣的 CSS 形状设计。....shape { shape-outside: circle(50%); } 54.子串匹配的属性选择器 使用属性选择器和 *= 运算符进行子字符串匹配。...用于文本换行的 CSS 形状 将 shape-outside 与 Polygon() 函数结合使用，可实现围绕不规则形状的精确文本环绕。....text-wrap { shape-outside: polygon(0 0, 100% 0, 100% 100%); } 59.自定义光标样式 使用光标属性更改光标样式。
border-radius: 50%; overflow: hidden; border: 2px solid #f0f0f0; float: left; shape-outside
【shape-outside】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的 ? 03.【BFC应用】?BFC应用之阻止外边距合并（margin collapsing） ? 04.
transform: translateX(-3rem) skewX(12deg); overflow: hidden; clip-path: circle(50% at 50% 50%); shape-outside...还可以在上面代码中发现一条 shape-outside: circle(50% at 50% 50%) 的样式，这个样式可以给元素设置形状，在这里的主要作用，是让问题和图片 UI 更加自然，如果我们去掉这条样式卡片将会像下图这样
比如，实现下面文字环绕圆形图片的效果： Codepen demo 关键样式： img { width: 300px; float: left; shape-outside: circle(
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
