list-style 可以让我们设置列表的样式，它是 list-style-type 、 list-style-image 、list-style-position 的缩写。属性值可以任意顺序排列，也可以只设置一个，如果同时设置了 type 和 image 则以 image 为优先，如果 image 无法加载则使用 type。

例如：

ul {
    list-style: square url(https://3yya.com/biaoqing.gif) inside;
}

列表标记

list-style-type 可以设置列表元素的标记，它可以是以下的值：

• 字符串：引号括起来的字符串，包括 emoji 表情（Windows 按 win + ; 可以调出 emoji 输入框）。
• none：不显示标记
• disc：实心圆点。
• circle：空心圆点。
• square：实心方块。
• decimal：阿拉伯数字。
• simp-chinese-informal：简体中文计数。
• simp-chinese-formal：大写中文计数。
• upper-alpha：大写字母计数。
• lower-alpha：小写字母计数。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/MWOVQNJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

列表标记位置

list-style-position决定了列表标记在不在元素内部，它可以是以下的值：

• outside：默认值，在元素外部。
• inside：在元素内部。

在例子中使用了粉色来显示了元素的内容范围，尝试修改 list-style-position 的值看看列表标记位置的变化。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/oNoqqZJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

列表标记使用图片

list-style-image 使得我们可以为列表的标记使用图片。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/dyZmmzr?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

---

练习

1. 用你喜欢的图片来作为列表标记，注意事先调整好图片的大小。