diff --git "a/\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html" "b/\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2a65dcc1b298f27b9e243e1871f90faeeddddc57
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.12.10 CSS\346\212\200\345\267\247/\345\274\200\345\205\263.html"	
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box{
+            width:500px;
+            display: flex;
+            justify-content: space-around;
+        }
+        input[type = "checkbox"]{
+            display: none;
+        }
+        label{
+            position: relative;
+            width: 50px;
+            height: 26px;
+            background: skyblue;
+            border-radius: 13px;
+            cursor: pointer;
+            transition: background .3s;
+        }
+        label[disabled]{
+            cursor: not-allowed;
+            opacity: .5;
+        }
+        label::before,
+        label::after{
+            transition: all .3s;
+            position: absolute;
+        }
+        label::before{
+            content: '关';
+            font-size: 16px;
+            line-height: 1;
+            top: 5px;
+            left: 28px;
+            color: white;
+        }
+        label::after{
+            content: '';
+            top: 1px;
+            left: 1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: white;
+        }
+        input[type = "checkbox"]:checked + label{
+            background: thistle;
+        }
+        input[type = "checkbox"]:checked+label::before{
+            content: '开';
+            left: 6px;
+        }
+        input[type="checkbox"]:active+label::after {
+            width: 23px;
+        }
+
+        input[type="checkbox"]:checked+label::after {
+            left: 25px;
+        }
+    </style>
+</head>
+<body>
+       <div class="box">
+        <input type="checkbox" id="switch" checked hidden>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-disabled" disabled hidden>
+        <label for="switch-disabled" disabled></label>
+        <input type="checkbox" id="switch-checked-disabled" checked disabled hidden>
+        <label for="switch-checked-disabled" disabled></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
