概要
list-style-image 属性用来指定一个能用来作为列表元素标记的图片。
通常来说使用list-style较为方便。
| 初始值 | none |
|---|---|
| 适用元素 | list items |
| 是否是继承属性 | yes |
| 适用媒体 | visual |
| 计算值 | none or the image with its URI made absolute |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | 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中定义的值会被取代。
正式语法
<uri> | none
举例
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
CSS
ul {
list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
}
结果
说明
| 说明 | 状态 | 注释 |
|---|---|---|
| CSS Lists and Counters 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 |
浏览器支持
| 特征 | 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 |