在現(xiàn)代 Web 開發(fā)中，CSS 開關(guān)樣式已經(jīng)成為一種非常流行的設(shè)計(jì)元素。開關(guān)樣式在交互中特別有用，可以用來控制頁面元素的狀態(tài)，例如選擇器、復(fù)選框和滑塊。使用 CSS 來創(chuàng)建樣式變量，可以幫助我們?cè)诓煌捻撁嫔陷p松地重用樣式。

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

上面的代碼演示了一個(gè)基本的開關(guān)樣式：.switch 是外圍容器；.slider 是實(shí)際開關(guān)；.slider:before 是開關(guān)里面的一部分，用來表示開或關(guān)的狀態(tài)。我們可以通過設(shè)置這些類的不同屬性來自定義樣式，例如顏色、寬度和高度等。

在 HTML 頁面中，可以使用以下代碼來創(chuàng)建開關(guān)樣式：

<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>

通過 CSS 和 HTML 的組合，我們可以輕松地為頁面添加交互元素。開關(guān)樣式是一種很好的方式，可以讓用戶更直觀地控制頁面元素的狀態(tài)，提高用戶體驗(yàn)。