🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# CSS list-style-image 属性 ## 实例 把图像设置为列表中的项目标记: ``` ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有浏览器都支持 list-style-image 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 ## 定义和用法 list-style-image 属性使用图像来替换列表项的标记。 ### 说明 这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。 注释:请始终规定一个 "list-style-type" 属性以防图像不可用。 | 默认值: | none | | --- | --- | | 继承性: | yes | | --- | --- | | 版本: | CSS1 | | --- | --- | | JavaScript 语法: | _object_.style.listStyleImage="url('/images/blueball.gif')" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | _URL_ | 图像的路径。 | | none | 默认。无图形被显示。 | | inherit | 规定应该从父元素继承 list-style-image 属性的值。 | ## TIY 实例 [将图像作为列表项标记](/tiy/t.asp?f=csse_list-style-image) 本例演示如何将图像作为列表项标记。 ``` <html> <head> <style type="text/css"> ul { list-style-image: url('/i/eg_arrow.gif') } </style> </head> <body> <ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 列表](/css/css_list.asp "CSS 列表") CSS 参考手册:[CSS list-style 属性](/cssref/pr_list-style.asp "CSS list-style 属性") HTML DOM 参考手册:[listStyleImage 属性](/jsref/prop_style_liststyleimage.asp "HTML DOM listStyleImage 属性")