PostCSS 是一个 CSS 处理器，可以通过扩展来增强它的功能。postcss-shape 是 PostCSS 的一个插件，它允许您使用更高级的形状，如多边形、椭圆和三角形，而不是仅限于矩形。
安装
首先，你需要在你的项目中安装 PostCSS 和 postcss-shape：
npm install postcss postcss-shape --save-dev
接下来，添加 postcss-shape 到你的 PostCSS 配置文件中，例如 postcss.config.js：
module.exports = {
plugins: [
require('postcss-shape')
]
}使用
一旦你添加了 postcss-shape 到你的 PostCSS 配置文件中，你就可以开始使用它了。假设你有以下 CSS 代码：
.shape {
border-radius: 50%;
shape-outside: rectangle(50%, 50%, 50%, 50%);
}这个代码创建了一个圆形形状，但是如果你想创建一个椭圆或一个五边形呢？使用 postcss-shape 插件，你可以这样写：
.shape {
border-radius: 50%;
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}这将创建一个正五边形形状。你也可以使用其他形状，例如椭圆：
.shape {
border-radius: 0;
shape-outside: ellipse(50% 50%, 200px 100px);
}这将创建一个椭圆形状，它的中心点是页面中心，水平半径是 200 像素，垂直半径是 100 像素。
示例代码
以下是一个完整的示例，演示如何使用 postcss-shape 的多边形和椭圆形状：
-- -------------------- ---- -------
--------- -----
------
------
-------------------- ----------
-------
------ -
------ ------
------- ------
-------------- ----
----------------- -----
------ -----
------------- -----
-
------- -
-------------- ---------
-
--------- -
-------------- ----------- --- -- ----- ---- ------
-
-------- -
-------------- ----------- ---- ----- -------
-
--------
-------
------
---- ------------ --------------
---- ------------ ----------------
---- ------------ ---------------
-------
-------在这个示例代码中，我们创建了三个不同的形状：圆形、三角形和椭圆形状。要注意的是，我们使用了 shape-outside 属性来定义每个形状，并将其应用到 .circle、.triangle 和 .ellipse 类中。
总结
现在你已经知道了如何使用 postcss-shape 插件来创建高级形状。通过使用这个插件，你可以将你的 CSS 设计提升到一个新的水平，并增强你的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43412