list-style-image - CSS（层叠样式表） 编辑

概要

 list-style-image 属性用来指定一个能用来作为列表元素标记的图片。

通常来说使用list-style较为方便。

初始值	none
适用元素	list items
是否是继承属性	yes
适用媒体	visual
计算值	none or the image with its URI made absolute
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

/* Keyword values */
list-style-image: none;

/* <url> values */
list-style-image: url('starsolid.gif');

/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;

值

<url>

用来作为标记的图片的地址。

none

说明没有图片被用作标记。如果这个值被设定，那么 list-style-type 中定义的值会被取代。

正式语法

<url> | none

举例

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

CSS

ul {
  list-style-image: url("https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/starsolid.gif")
}

结果

说明

说明	状态	注释
CSS Lists Module Level 3 list-style-image	Working Draft	Extends support to any <image> data type.
CSS Level 2 (Revision 1) list-style-image	Recommendation	Initial definition

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

特征	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持	1.0	1.0 (1.7 or earlier)	4.0	7.0	1.0

特征	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本支持	1.0	1.0 (1)	6.0	6.0	1.0

其他链接

• list-style, list-style-type, list-style-position