files/zh-cn/web/css/list-style-image/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: list-style-image
slug: Web/CSS/list-style-image
tags:
  - CSS列表
  - CSS属性
  - 参考
translation_of: Web/CSS/list-style-image
---
<p>{{ CSSRef}}</p>

<h2 id="概要">概要</h2>

<p> <strong><code>list-style-image</code></strong> 属性用来指定一个能用来作为列表元素标记的图片。</p>

<p>通常来说使用{{ cssxref("list-style") }}较为方便。</p>

<p>{{cssinfo}}</p>

<h2 id="语法">语法</h2>

<pre class="brush:css">/* Keyword values */
list-style-image: none;

/* &lt;url&gt; values */
list-style-image: url('starsolid.gif');

/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
</pre>

<h3 id="值">值</h3>

<dl>
 <dt><code>&lt;url&gt;</code></dt>
 <dd>用来作为标记的图片的地址。</dd>
 <dt><code>none</code></dt>
 <dd>说明没有图片被用作标记。如果这个值被设定，那么 {{ Cssxref("list-style-type") }} 中定义的值会被取代。</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

{{csssyntax}}

<h2 id="举例">举例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
}</pre>

<h3 id="结果">结果</h3>

<p>{{ EmbedLiveSample('Examples') }}</p>

<h2 id="说明">说明</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">说明</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}</td>
   <td>{{ Spec2('CSS3 Lists') }}</td>
   <td>Extends support to any {{cssxref("&lt;image&gt;")}} data type.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器支持">浏览器支持</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特征</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特征</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>1.0</td>
   <td>{{ CompatGeckoMobile("1") }}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="其他链接">其他链接</h2>

<ul>
 <li>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</li>
</ul>