CSS喇叭開關，也就是常見的“收縮展開”效果，可以用來增強頁面交互和優化用戶體驗。下面我們來介紹一下如何通過CSS實現這個效果。

/* 先定義一個全局變量（Custom Property） */
:root {
--color-primary: #007bff;
}
/* 樣式 */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
margin: 0;
padding: 0;
border-radius: 15px;
background-color: #dae1e7;
cursor: pointer;
transition: background-color .2s ease-in-out;
}
/* 喇叭 */
.switch:before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #fff;
transform: translate(0, -50%);
transition: transform .2s ease-in-out;
}
/* 開關 */
.switch:checked {
background-color: var(--color-primary);
}
.switch:checked:before {
transform: translate(30px, -50%);
}

如上所示，我們首先定義了一個全局變量，用于后續的樣式。接著定義了樣式，包括開關的尺寸大小、形狀、背景色等。在樣式中，我們還定義了一個喇叭形狀，通過偽元素:before實現，用于表示開關的狀態。最后，通過:checked偽類來表示當前開關的狀態，改變背景色和喇叭的位置即可。

關于CSS喇叭開關，還可以根據實際需要進行擴展，比如加入動畫效果、改變喇叭的形狀、繪制更復雜的圖案等。希望大家能夠根據自己的需求靈活運用，打造出更好的用戶體驗。