paint()
语法
css
paint(workletName, ...parameters)
其中
- workletName
-
已注册的 worklet 的名称。
- parameters 可选
-
传递给 paintWorklet 的可选附加参数
正式语法
<paint()> =
paint( <ident> , <declaration-value>? )
示例
paint() 的基本 CSS 用法
给定以下 HTML
html
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item N</li>
</ul>
在 JavaScript 中，我们注册 paint worklet
js
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
);
在 CSS 中，我们将 background-image 定义为 paint() 类型，带有 worklet 名称 boxbg，以及 worklet 将使用的任何变量（例如 --box-color 和 --width-subtractor）
css
body {
font: 1.2em / 1.2 sans-serif;
}
li {
background-image: paint(boxbg);
--box-color: hsl(55 90% 60%);
}
li:nth-of-type(3n) {
--box-color: hsl(155 90% 60%);
--width-subtractor: 20;
}
li:nth-of-type(3n + 1) {
--box-color: hsl(255 90% 60%);
--width-subtractor: 40;
}
带参数的 CSS paint()
你可以在 CSS paint() 函数中传递可选参数。在此示例中，我们传递了两个参数，它们控制一组列表项上的 background-image 是 filled 还是具有 stroke 轮廓，以及该轮廓的 width
css
body {
font: 1.2em / 1.2 sans-serif;
}
li {
--box-color: hsl(55 90% 60% / 100%);
background-image: paint(hollow-highlights, stroke, 2px);
}
li:nth-of-type(3n) {
--box-color: hsl(155 90% 60% / 100%);
background-image: paint(hollow-highlights, filled, 3px);
}
li:nth-of-type(3n + 1) {
--box-color: hsl(255 90% 60% / 100%);
background-image: paint(hollow-highlights, stroke, 1px);
}
我们在选择器块中包含了一个自定义属性，定义了一个 boxColor。自定义属性可供 PaintWorklet 访问。
规范
| 规范 |
|---|
| CSS Painting API Level 1 # paint-notation |
浏览器兼容性
加载中…