CSS 是網頁設計中非常重要的一部分，可以通過它來制作出豐富多彩的效果。其中，制作三道杠就是一個非常常見的效果，用于網頁布局的排版處理。在 CSS 中，制作三道杠需要用到一些特殊的樣式屬性。接下來，我們就來一起學習如何利用 CSS 制作三道杠。

.menu-icon{
display: inline-block;
position: relative;
width: 20px;
height: 16px;
cursor: pointer;
}
.menu-icon span{
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
width: 100%;
height: 2px;
background-color: #000;
transition: transform .2s ease-out;
}
.menu-icon span:before,
.menu-icon span:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
transition: transform .2s ease-out;
}
.menu-icon span:before{
transform: translateY(-6px);
}
.menu-icon span:after{
transform: translateY(4px);
}
.menu-icon.open span{
transform: rotate(45deg) translate(-2px,-2px);
}
.menu-icon.open span:before{
transform: rotate(90deg) translate(0,-6px);
}
.menu-icon.open span:after{
transform: rotate(90deg) translate(0,4px);
}

上面的代碼是實現三道杠效果的樣式代碼，其中為 .menu-icon 添加了一個 span 標簽，實現了三道杠的效果。為了顯示這個標簽，它需要被賦予一些基本的樣式，如寬度、高度、樣式類型等。同時，在 span 標簽內定義了兩個偽元素 :before 和 :after，分別表示三道杠中上下兩個部分的樣式。

通過調整這些元素的樣式屬性，可以實現三道杠效果的開與關。通過給 .menu-icon 添加 open 類，就可以讓三道杠展開成橫線。同時，在 .menu-icon.open span:before 和 .menu-icon.open span:after 中，還需要加上一些 transform 屬性，來實現圖標的旋轉效果。

通過添加這些樣式，就可以在 CSS 中實現三道杠的效果。除此之外，還可以通過調整寬度、顏色、動畫時間等屬性，來實現更為豐富的三道杠效果。