CSS list-style-image 属性用于将图像添加为列表项标记。
语法
CSS 属性 list-style-image 可以有不同的值。让我们检查所有可能的可用语法，为 list-style-image 设置一个值。
关键字值
list-style-image: none;
URL 值
list-style-image: url("<filename>");
有效图像值
list-style-image: linear-gradient(to left bottom, red, blue);
Global 值
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;
可能的值
- <image>：用作标记的图像。
- none：不使用任何图像作为标记。如果 list-style-image 设置为 none，则将使用 list-style-type 设置的值。
适用于
列表项。<li> 和 <summary> 等元素，以及所有具有 display： list-item 的元素。
DOM 语法
object.style.listStyleImage = url('<filename>')
CSS list-style-image - 基本示例
以下是 list-style-image CSS 属性的示例，其中包含有序列表和无序列表的有效 URL：
<html>
<head>
<style>
.type-url-unordered {
list-style-image: url('images/smiley.png');
}
.type-url-ordered {
list-style-image: url('images/smiley.png');
}
</style>
</head>
<body>
<h2>Example - list-style-image</h2>
<ul class="type-url-unordered"><u>List style image</u>
<li>First Item:
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<ol class="type-url-ordered"><u>List style image</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
CSS list-style-image - 使用 linear-gradient（）
下面是一个 list-style-image CSS 属性的示例，其中传递给了它 linear-gradient（） 值：
<html>
<head>
<style>
.type-gradient {
list-style-image: linear-gradient(to left bottom, red, orange, yellow, lightyellow, blue, magenta, purple);
}
</style>
</head>
<body>
<h2>list-style-image: linear-gradient()</h2>
<ul class="type-gradient"><u>List style image</u>
<li>First Item:
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
CSS list-style-image - 使用“none”
以下是 list-style-image： none CSS 属性的示例：
<html>
<head>
<style>
.type-image-none {
list-style-image: none;
}
</style>
</head>
<body>
<h2>list-style-image: none</h2>
<ul class="type-image-none"><u>List style image - none</u>
<li>First Item:
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
