CSS 属性

list-style-image CSS 属性用于添加图像作为列表项标记。

语法

CSS 属性 list-style-image 可以具有不同的值。让我们检查所有可能的可用语法来设置 list-style-image 的值。

关键字值

list-style-image: none;

URL 值

list-style-image: url("<filename>");

有效图像值

list-style-image: linear-gradient(to left bottom, red, blue);

全局值

list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

属性值

  • <image>:用作标记的图像。

  • none:不使用图像作为标记。如果 list-style-image 设置为 none，则将使用为 list-style-type 设置的值。

适用范围

列表项目。 <li> 和 <summary> 等元素，以及所有具有 display: list-item 的元素。

DOM 语法

object.style.listStyleImage = url('<filename>')

CSS list-style-image: 基本示例

以下是 list-style-image CSS 属性的示例，其中包含有序和无序列表的有效 URL:

<html>
<head>
<style>
  .type-url-unordered {
      list-style-image: url('/css/images/smiley.png');
  }

  .type-url-ordered {
      list-style-image: url('/css/images/smiley.png');
 }
</style>
</head>
<body>
  <h2>Example: list-style-image</h2>
  <ul class="type-url-unordered"><u>List style image</u>
    <li>First Item:
      <ul>
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
      </ul>
    </li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ul> 

  <ol class="type-url-ordered"><u>List style image</u>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ol>
</body>
</html>

CSS list-style-image: 使用 Linear-gradient()

以下是 list-style-image CSS 属性的示例，其中传递有 Linear-gradient() 值:

<html>
<head>
<style>
   .type-gradient {
      list-style-image: linear-gradient(to left bottom, red, orange, yellow, lightyellow, blue, magenta, purple);
   }
   </style>
</head>
<body>
   <h2>list-style-image: linear-gradient()</h2>
   <ul class="type-gradient"><u>List style image</u>
      <li>First Item:
         <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
         </ul>
      </li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul> 
</body>
</html>

CSS list-style-image: 使用"none"

这是 list-style-image: none CSS 属性的示例:

<html>
<head>
<style>
   .type-image-none {
      list-style-image: none;
   }
   </style>
</head>
<body>
   <h2>list-style-image: none</h2>
   <ul class="type-image-none"><u>List style image: none</u>
      <li>First Item:
         <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
         </ul>
      </li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul> 
</body>
</html>