CSS list-style-image用法及代码示例

CSS中的list-style-image属性用于设置将用作列表项标记的图像。

用法:

list-style-image:none|url|initial|inherit;

属性值：

没有：该值指定没有图像用作标记。如果设置了此值，则使用list-style-type中定义的标记。这是默认值。
用法:

list-style-image:none;

例：

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
        CSS list-style-image Property 
    </title> 
    <style> 
        ul  { 
          list-style-image:none; 
        } 
    </style> 
    </head> 
    <body style = ""> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            CSS list-style-image Property 
        </h2> 
          
        <p>Sorting Algorithms</p> 
          
        <ul> 
          <li>Bubble Sort</li> 
          <li>Selection Sort</li> 
          <li>Merge Sort</li> 
        </ul> 
    </body> 
</html>

输出：
liststyleimage

网址：在此值中，图像的路径用作list-item标记。
用法:

list-style-image:url;

例：

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
        CSS list-style-image Property 
    </title> 
    <style> 
        ul  { 
          list-style-image:  
url("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png"); 
        } 
    </style> 
    </head> 
    <body style = ""> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            CSS list-style-image Property 
        </h2> 
          
        <p>Sorting Algorithms</p> 
          
        <ul> 
          <li>Bubble Sort</li> 
          <li>Selection Sort</li> 
          <li>Merge Sort</li> 
        </ul> 
    </body> 
</html>

输出：
liststyleimage

初始：此模式将此属性设置为其默认值。
用法:
```
list-style-image:initial;
```

支持的浏览器：下面列出了list-style-image属性支持的浏览器：

谷歌浏览器1.0
Internet Explorer 4.0
Firefox 1.0
Opera 7.0
苹果Safari 1.0

相关用法

注：本文由纯净天空筛选整理自Vishal Chaudhary 2大神的英文原创作品 CSS | list-style-image Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。