所有当代桌面和移动浏览器都实现了其和 shape-image-threshold 属性。 [src="shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; } 复制 很少看到 CSS Shapes 用于比在图像周围包裹文本更复杂的事情，就像这样。 很少看到 CSS Shapes 用于比在图像周围包裹文本更复杂的事情，就像这样。（大预览） Web 设计师没有意识到 CSS Shapes 所提供的创造潜力，并且没有理由不使用它们。也有可能 Web 开发人员仍然认为 Shapes 在浏览器中的支持很差。

尽管如此，由于所有现代浏览  WhatsApp 数据库  器现在都支持 Shapes - 并且它们的属性在旧浏览器中优雅地降级 - 目前没有理由避免使用它们。 利用形状做更多事情 # 奥托·斯托奇（Otto Storch）的这个设计是最先引起我注意的设计之一。我欣赏其两列合理的文案的结构简单性，以及他的图像的放置方式——用文本包裹在图像周围以创建有机形状——有趣地让页面充满活力和动感。 左：一抹美丽。 源自 McCall's Magazine 艺术指导，由 Otto Storch 负责。 右图：这种充满动感的设计使用了 CSS 形状和 HTML 图片元素。

左：一抹美丽。源自 McCall's Magazine 艺术指导，由 Otto Storch 负责。右图：这种充满动感的设计使用了 CSS 形状和 HTML 图片元素。（大预览） 我很少在网上看到具有这种能量的布局，因此我的设计包括四个颜色鲜艳的甲壳虫，每个大众汽车都以一定角度放置，以与两列高大的文本形成对比。我只需要两个结构元素来实现这个受 Storch 启发的设计：主要元素和旁白。每个元素都包含运行文本的段落，以及两个图片元素，使我能够将小图像替换为大图像复制 这些图片元素适合小屏幕的边缘，但我仍然需要在运行副本的段落两侧留有空白。通过使用视口宽度单位，该空间始终与这些屏幕成比例 复制 我裁剪了这些图片，使其尺寸适合小屏幕。