CSS - list-style-image 屬性

CSS list-style-image 屬性用於新增影像作為列表項標記。

語法

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

屬性值

值	描述
none	不使用影像作為標記，而是使用定義的標記型別。如果未定義，則將使用預設的“disc”型別。預設值。
url	它指定用作列表項標記的影像路徑。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS 列表樣式影像屬性示例

以下示例說明了使用不同值的list-style-image 屬性。

使用 none 值的列表樣式影像屬性

為了不使用任何影像作為標記，我們使用none 值。將使用預設的“disc”標記作為標記，或者使用list-style-type 定義的任何標記。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 22px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: none;
      }

      .unordered2 {
         color: green;
         list-style-image: none;
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: none
   </h4>
   <p>
      In this case, the default "disc" marker
      is used as list-style-type property is 
      not defined.
   </p>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
   <p>
      In this case, the square marker is used 
      as list-style-type property is defined 
      as "square".
   </p>
   <ul class="unordered2">
      <li>
         Potato
      </li>
      <li>
         Onion
      </li>
      <li>
         Cabbage
      </li>
      <li>
         Tomato
      </li>
   </ul>
</body>

</html>

使用影像 URL 的列表樣式影像屬性

要將影像用作列表項的標記，我們將影像 url 指定給list-style-image 屬性。指定的影像將用作列表項的標記。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 22px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: url("/css/images/cursor-zoom-out.png");
         list-style-type: circle;
      }

      .unordered2 {
         color: green;
         list-style-image: url("/css/images/cursor-e-resize.png");
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: url ()
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
   <h4>
      list-style-image: url ()
   </h4>
   <ul class="unordered2">
      <li>
         Potato
      </li>
      <li>
         Onion
      </li>
      <li>
         Cabbage
      </li>
      <li>
         Tomato
      </li>
   </ul>
   <p>
      Note: list-style-type is also defined 
      in case the image cannot be used.
   </p>
</body>

</html>

使用線性漸變的列表樣式影像屬性

除了影像之外，我們還可以使用線性漸變作為列表項的標記。指定的顏色組合將用作列表項的標記。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 30px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: 
         linear-gradient(to right, red, orange, yellow, green);
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: 
      linear-gradient(to right, red, orange, yellow, green)
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

支援的瀏覽器

屬性
list-style-image	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

列印頁面