【CSS】305- [译] Web 使用 CSS Shapes 的艺术设计

• %;

• %;

• %;

• %;

• 0, 0 100%, 100% 100%);

• %;

• %;

• % 0, 0 100%, 100% 100%);

• %;

• %;

• ) p:nth-of-type(1)::before {

• ) p:nth-of-type(2)::before {

• content: "";

• float: right;

• width: 160px;

• height: 320px;

• shape-outside: polygon(20px 220px, 120px 0px, [...]);

• }

成果

现在 Firefox 已经发布了一个支持 CSS Shapes 的版本，并在其开发工具中启动了一个 Shape Path Editor 插件，目前只有 Edge 不支持 CSS Shapes。由于微软宣布将他们自己的 EdgeHTML 渲染引擎改为 Chromium 的 Blink 引擎（一个与 Chrome 和 Opera 相同的引擎），这种情况很快就会改变。

像 CSS Shapes 这样的工具现在为我们提供了无数可以利用艺术设计吸引读者的注意力并让他们保持参与的机会。我希望你现在和我一样兴奋！

编者注: Andy 的新书，《Web 艺术设计》（预购地址），探索了 100 年的艺术设计，以及我们如何利用这些知识和最新的网络技术来创造更好的数字产品。阅读摘录章节，了解这本书的内容。

更多资源

• “《Web 的艺术设计》” Andy Clarke 著

• “《重新审视 CSS Shapes》” Rachel Andrew 著

• “CSS Shapes” MDN 网络文档，Mozilla

• “在 CSS 上编辑形状路径” MDN 网络文档，Mozilla

• “Web 的艺术设计：一本新的畅销书” Smashing 杂志

如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

▼原创系列推荐▼1.JavaScript 重温系列（22篇全）
2.ECMAScript 重温系列（10篇全）
3.JavaScript设计模式 重温系列（9篇全）
4.正则 / 框架 / 算法等 重温系列（16篇全）



你点的每个赞，我都认真当成了喜欢