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 |
瀏覽器相容性
載入中…