文字排版
list-style-image
用於控制列表項目的標記圖片的工具類別。
| Class | 樣式 |
|---|---|
list-image-[<value>] | list-style-image: <value>; |
list-image-(<custom-property>) | list-style-image: var(<custom-property>); |
list-image-none | list-style-image: none; |
範例
基本範例
使用 list-image-[<value>] 語法來控制列表項目的標記圖片
- 5 杯切碎的牛肝菌
- 1/2 杯橄欖油
- 3 磅芹菜
<ul class="list-image-[url(/img/checkmark.png)]"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>使用 CSS 變數
使用 list-image-(<custom-property>) 語法，使用 CSS 變數來控制列表項目的標記圖片
<ul class="list-image-(--my-list-image)"> <!-- ... --></ul>這只是 list-image-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。
移除標記圖片
使用 list-image-none 工具類別從列表項目中移除現有的標記圖片
<ul class="list-image-none"> <!-- ... --></ul>響應式設計
前綴a list-style-image 工具類別 帶有中斷點變體，例如 md:，僅在以下情況下應用該工具類別medium 螢幕尺寸及以上
<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ..."> <!-- ... --></div>在 變體文件中瞭解更多關於使用變體的資訊。
