是我的内容的主要元素，再加上三只颜色鲜艳的甲虫的大图像。我用一个部分将这些元素括起来，然后添加一个代表柏油路的装饰性演示部复制 小屏幕设计完成。 小屏幕设计完成。（大预览） 我不需要水平滚动面板出现在小屏幕上，因此仅添加基础样式和形状，将我的文本雕刻成甲虫的形状。我首先将段落文本对齐到中心，并将其设置为大写。虽然我通常不会以这种方式将文本设置为整个文本块，但实心大写字母形式有助于强调甲虫形状： p { text-align: center; text-transform: uppercase; } 复制 CSS Shapes 规范的早期草案包括一个 shape-inside 属性，该属性使我们能够像 Storch 那样将文本包裹在形状的内部。
我很失望 W3C 将此功能推迟到 CSS Shapes Module Level 2，该模块仍处于编辑草 英国电话号码清单 案阶段。您可以使用 shape-outside 实现类似的效果，但我迫不及待地希望我们能够像 Otto Storch 在线那样创造性地使用文字。 两个 alpha 透明的 PNG 图像创建了经典的甲虫形状。 两个 alpha 透明的 PNG 图像创建了经典的甲虫形状。（大预览） 我在我的段落中添加了两个形状图像。文本将在这些图像之间流动以反映甲虫的脸，我添加了角色属性。为了将它们从可访问性树中取出，我还向这两个图像添加了 aria-hidden 属性。
<img src="shape-2.png" alt="" role="presentation" aria-hidden="true"> 复制 为了将我的文本雕刻成标志性大众汽车的形状，我使用相同的两个图像应用 > 复制 由于我不需要使用小屏幕的人可以看到该划分，因此我将其显示属性设置为 none： div { display: none; } 复制 对称的 2x2 网格，在中型屏幕上将文本雕刻成大众甲壳虫的标志性形状。 对称的 2x2 网格，在中型屏幕上将文本雕刻成大众甲壳虫的标志性形状。（大预览） 我的小屏幕设计很时尚，就像甲壳虫一样，但中型屏幕上的额外空间允许我将雕刻的文本放在它模仿的图片旁边。 在实施任何设计之前，我会制作一个故事板。 在实施任何设计之前，我会制作一个故事板。 |
