CSS+開關提示框
CSS可用于創建各種各樣的效果，其中包括開關提示框。本文將介紹如何使用CSS來創建簡單的開關提示框。
<html>
<head>
<title>CSS+開關提示框</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #aaa;
border-radius: 20px;
cursor: pointer;
}
.switch:before {
position: absolute;
content: "";
width: 18px;
height: 18px;
top: 1px;
left: 1px;
background-color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
input:checked + .switch:before {
transform: translateX(20px);
}
</style>
</head>
<body>
<h1>開關提示框</h1>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</body>
</html>代碼解釋：
.switch 定義了開關提示框的樣式，包括背景顏色、邊框半徑等；
.switch:before 通過實心圓形表示開關的狀態，content屬性為空表示不顯示任何文字；
input:checked + .switch:before 定義了開關為開啟狀態時圓形向右平移20px，從而顯示“打開”狀態。通過上述代碼，我們可以輕松創建簡單的開關提示框。當然，我們也可以進一步優化樣式和交互，使其更符合具體業務需求。
上一篇html 斜體字怎么設置
下一篇css+auto實例