[译]使用 Firefox Shape Path 编辑器编辑 shape-outside、clip-path 属性

原文：Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor, by Josh Marinacci

页面布局不必定是四四方方的。历史上，页面中的每一个元素都被渲染为矩形，但也能够不是矩形。借助 CSS Shapes 咱们能够建立与印刷杂志同样时尚的页面布局，同时又具备网页自己的优点。

CSS Shapes 让你的网页设计突破矩形的限制。全部经典的杂志设计元素，如非矩形文本流和非矩形形状的图像，如今均可以使用低代价的新 CSS 标准实现。文字可以流动，图像能够变圆，一些不平行线条的出现甚至可使你的网站脱颖而出，让你的品牌不同凡响。怎样可以脱颖而出，是当今大多数网站面临的最大挑战，而 CSS Shapes 就能够助你一臂之力。

Image by Sara Soueidan

标准

元素形状只能经过两个 CSS 属性控制：shape-outside 和 clip-path。

shape-outside 属性改变 浮动 DOM 元素外的内容流向，它影响布局，但不影响绘制。clip-path 属性定义 DOM 元素的裁剪路径，路径内的元素内容可见，路径外的不可见，它影响绘制，但不影响布局。

左：应用了 clip-path 属性 右：应用了 shape-outside 属性

由于两个属性是分开的，且控制不一样的方面（绘制或布局），你能够根据须要使用它们中的一个或者两个。并且还有一个好消息，它们如今都支持一样的 basic-shape 语法。

将图片裁剪成圆形怎么作？使用 clip-path: circle(50%) 就能够了。想要让文本按照圆形轨迹包围图片的话，就使用 shape-outsideL circle(50%)。basic-shape 语法支持的裁剪图形包括矩形、圆形、椭圆形和多边形。固然，手动定位包含多个点的多边形很痛苦，幸运的是，咱们有一个更好的办法。

Shape Path 编辑器

Firefox 62 开始支持 Shape Path 编辑器，你能够以可视化的方式在 CSS 查看器中直接编辑形状。打开 Firefox，使用 Firefox Developer Tools 选择要编辑形状的元素，选中元素后，会发如今 shape-outside 和 clip-path 属性旁边会显示一个小小的 icon 图标，若是元素没有设置这两个属性的话，你也能够手动添加。接下来点击这个 icon 开始可视化编辑，你能够用鼠标 直接编辑 元素的形状。

打开控制台查看器，选择要编辑的元素：

译者注：图里打开的方式有些繁琐，直接 F12 就能打开控制台查看器了

点击 clip-path 或 shape-outside 旁边的 icon。

编辑裁剪路径：

编辑 outside-shape：

演示的 demo 页面 在这里。

更多的 CSS Shape 编辑器方面的内容能够查看 完整文档。

渐进加强

今天的大多数浏览器都支持 CSS shapes 了，在不支持的浏览器中咱们也能平稳地退化。使用如今浏览器的用户能够获得良好的阅读体验，在不支持的浏览器中用户 也感受不到有什么不对。

惊人的应用案例

下面列举了使用了 CSS Shapes 实现的几个惊人的应用案例：

页面中使用 clip-path 实现的文本效果：

via Mandy Michael

使用 clip-path 实现的植物和背景的效果：

via Aga Naplocha

还有一个结合 clip-path 和 shape-outside 属性达到的效果：

via Nicholas Evans

打破常规

今日能实现的对元素形状的控制得益于有 shape-outside 和 clip-path 两个属性。Firefox Shape Path 编辑器让编辑它们变得更加容易。

你的网站里有使用过这种打破常规的布局吗？

（完）