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;

使用 list-image-[<value>] 语法来控制列表项的标记图片：

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5 cups chopped Porcini mushrooms</li>
  </ul>

使用 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>

在 list-style-image 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ...">
  </div>

在变体文档中了解更多关于使用变体的信息。

line-height

用于控制元素行距（即行高）的工具。

list-style-position

用于控制列表项标记图片的工具。