CSS3的斜杠（

/

）在網頁設計中有許多的用途。下面我們來一起了解一下。

1. 分隔符

在設計網頁時，很多時候需要使用分隔符來分隔不同的內容。斜杠就是一個很好的選擇。例如：

.container {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
.container h2 {
font-size: 24px;
text-align: center;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
padding-bottom: 10px;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
}
.container li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.container li:last-child {
border: none;
}
.container li:before {
content: "/ ";
color: #ccc;
}

其中::before偽元素在每個列表項前加上了一個斜杠，用來分隔每個內容。

2. 文本修飾

有時候需要在文本中加入一些修飾線條，可以使用斜杠來實現。例如：

.text {
text-decoration: line-through;
}
.text:before {
content: "/ ";
}

這樣就能在文本上方加上了一條斜線。同樣地，還可以使用::after偽元素在文本下方加上斜線。

3. 圖片修飾

同樣地，我們也可以使用斜杠來修飾圖片。例如：

.image {
border: 1px solid #ccc;
}
.image:before {
content: "/ ";
color: #ccc;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這樣可以在圖片上方加上了一條斜線。

CSS3的斜杠是一種很好用的工具，可以更好地美化頁面。但是相信大家也會想到一些其他的用途。使用起來很簡單，只需要設置::before或::after偽元素即可。希望大家能夠在實際開發中也能加以運用。