CSS3是一個強大的樣式語言，它可以對網頁的視覺效果進行極致的控制，為了更好地呈現內容，我們常常使用列表。而CSS3中也提供了一些列列表特效，下面我們就來了解一下。

/* 無序列表樣式 */
ul {
list-style: none; /* 取消默認樣式 */
padding: 0;
margin: 0;
}
/* 圓形標記 */
ul li {
margin-bottom: 5px;
padding: 0 0 0 30px;
line-height: 20px;
background: url(circle.png) no-repeat left center;
}
/* 方形標記 */
ul li.square {
background: url(square.png) no-repeat left center;
}
/* 三角形標記 */
ul li.triangle {
background: url(triangle.png) no-repeat left center;
}
/* 有序列表樣式 */
ol {
list-style: none;
counter-reset: item;
padding: 0;
margin: 0;
}
/* 數字標記 */
ol li {
margin-bottom: 5px;
line-height: 20px;
counter-increment: item; /* 自定義計數器 */
}
ol li:before {
content: counter(item) ". "; /* 在每個li前插入計數器 */
}
/* 字母標記 */
ol.alpha {
list-style-type: lower-alpha; /* 小寫字母標記 */
}
ol.alpha li {
background-color: #EEE;
margin-bottom: 2px;
}
ol.alpha li:before {
content: counter(item, lower-alpha) ". "; /* 自定義計數器為小寫字母 */
}
/* 羅馬數字標記 */
ol.roman {
list-style-type: upper-roman; /* 大寫羅馬數字標記 */
}
ol.roman li {
background-color: #EEE;
margin-bottom: 2px;
}
ol.roman li:before {
content: counter(item, upper-roman) ". "; /* 自定義計數器為大寫羅馬數字 */
}

通過上面的代碼，我們可以自定義各種各樣的列表樣式，讓內容更加有條理，而不僅僅是無聊的黑白文本堆積。