CSS toggle是一種開關式的CSS效果。該效果常見于網頁界面中的開關控件，可以實現內容的折疊和展開功能。開關控件通常包含一個滑塊，用戶可以通過點擊或拖拽來改變狀態。

CSS toggle的實現方式主要是通過利用CSS的:checked選擇器和~選擇器。當滑塊被選中時，可以通過:checked選擇器來應用相應的CSS樣式。同時，通過將滑塊放在一個父元素內，并使用~選擇器來操作其子元素，可以實現控制其他元素的顯示和隱藏。

CSS代碼示例：
.toggle-box input[type="checkbox"] {
display: none;
}
.toggle-box .slider {
position: relative;
height: 20px;
width: 40px;
border-radius: 20px;
background-color: #ccc;
}
.toggle-box .slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
border-radius: 50%;
top: 1px;
left: 1px;
background-color: white;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.toggle-box input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
.toggle-box input[type="checkbox"]:checked + .slider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}

上述代碼使用了一個input[type="checkbox"]元素作為控制器，其中的:checked選擇器通過改變其選中狀態來控制其他元素的顯示和隱藏。具體來講，當該元素被選中時，其后面的.slider元素會應用新的CSS樣式，并使其前面的:before元素向右移動20像素，從而改變滑塊的狀態。