如果想要在網(wǎng)頁中使用像IOS一樣的開關(guān)控件，可以使用CSS來實(shí)現(xiàn)。

/* html結(jié)構(gòu) */
<div class="switch">
<input type="checkbox" id="switch-1" class="switch-input">
<label for="switch-1" class="switch-label"></label>
</div>
/* CSS樣式 */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
margin: 0 10px;
}
.switch-input {
display: none;
}
.switch-label {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 28px;
border-radius: 999px;
background-color: #ddd;
transition: background-color 0.2s;
}
.switch-input:checked + .switch-label {
background-color: #4cd964;
}
.switch-label::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
border-radius: 999px;
background-color: #fff;
box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
transition: transform 0.2s;
}
.switch-input:checked + .switch-label::before {
transform: translateX(22px);
}
.switch-label::after {
content: "OFF";
position: absolute;
top: 6px;
left: 30px;
color: #fff;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}
.switch-input:checked + .switch-label::after {
content: "ON";
left: 5px;
}

上面代碼中，.switch定義一個(gè)灰色背景的圓形區(qū)域，.switch-input用來隱藏原始的checkbox，.switch-label定義開關(guān)的樣式和狀態(tài)，.switch-label::before定義圓形的按鈕，.switch-label::after用來顯示開關(guān)狀態(tài)文字。

通過上述CSS實(shí)現(xiàn)，我們就可以在網(wǎng)頁中實(shí)現(xiàn)一個(gè)簡單的仿IOS開關(guān)控件了。