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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。