排版
list-style-image
用于控制列表项标记图片的工具。
| 类 | 样式 |
|---|---|
list-image-[<value>] | list-style-image: <value>; |
list-image-(<custom-property>) | list-style-image: var(<custom-property>); |
list-image-none | list-style-image: none; |
示例(Examples)
基本示例(Basic example)
使用 list-image-[<value>] 语法来控制列表项的标记图片：
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
<ul class="list-image-[url(/img/checkmark.png)]"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>使用 CSS 变量(Using a CSS variable)
使用 list-image-(<custom-property>) 语法，通过 CSS 变量控制列表项的标记图片：
<ul class="list-image-(--my-list-image)"> <!-- ... --></ul>这只是 list-image-[var(<custom-property>)] 的简写形式，会自动为你添加 var() 功能。
删除标记图片(Removing a marker image)
使用 list-image-none 工具从列表项中移除现有的标记图片：
🌐 Use the list-image-none utility to remove an existing marker image from list items:
<ul class="list-image-none"> <!-- ... --></ul>响应式设计(Responsive design)
在 list-style-image 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。