diff --git "a/\344\275\234\344\270\232/20211209-css18\344\275\234\344\270\232-CSS\346\225\210\346\236\234/demo1.html" "b/\344\275\234\344\270\232/20211209-css18\344\275\234\344\270\232-CSS\346\225\210\346\236\234/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..23794fea29228bb8015f0df49548f49e24f05bdf
--- /dev/null
+++ "b/\344\275\234\344\270\232/20211209-css18\344\275\234\344\270\232-CSS\346\225\210\346\236\234/demo1.html"
@@ -0,0 +1,248 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        :root {
+            /* 定义气泡弹出框背景色 */
+            --poptipBg: #30363d;
+            /* 弹出框字体颜色 */
+            --color: #fff;
+            /* 弹出框三角形边长 */
+            --triangle: 8px;
+            /* 弹出框与元素的偏移 */
+            --distance: -12px;
+            word-break: break-all;
+        }
+        /* .poptip1 {
+            position: relative;
+            z-index: 101;
+        }
+
+        .poptip1::before,
+        .poptip1::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .poptip1::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: var(--triangle) var(--triangle) 0 var(--triangle);
+            border-color: var(--poptipBg) transparent transparent transparent;
+            left: calc(50% - var(--triangle));
+            top: 0px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .poptip1::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: 50%;
+            bottom: 100%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip1:hover::before,
+        .poptip1:hover::after {
+            visibility: visible;
+            opacity: 1;
+        } */
+        .poptip {
+            position: relative;
+            z-index: 101;
+        }
+
+        .poptip::before,
+        .poptip::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .poptip::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width:var(--triangle) 0 var(--triangle) var(--triangle);
+            border-color:transparent transparent transparent var(--poptipBg)  ;
+            bottom: 0%; 
+            left: -10%;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .poptip::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls); 
+            position: absolute;
+            padding: 12px 6px;
+            /* white-space: nowrap; */
+            z-index: -1;
+            left: -53%;
+            width: 100px;
+            height: 76px;
+            bottom: calc(-100% + var(--distance));
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip:hover::before,
+        .poptip:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .btn {
+            width: 100px;
+            line-height: 1.5;
+            padding: 5px 10px;
+            color: #fff;
+            background: #00adb5;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+            
+        }
+        .poptip1 {
+            position: relative;
+            z-index: 101;
+        }
+
+        .poptip1::before,
+        .poptip1::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .poptip1::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 var(--triangle) var(--triangle)  var(--triangle);
+            border-color:  transparent transparent var(--poptipBg)  transparent;
+            left: calc(50% - var(--triangle));
+            bottom: -100%;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .poptip1::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: 50%;
+            bottom: -215%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip1:hover::before,
+        .poptip1:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+        .poptip2 {
+            position: relative;
+            z-index: 101;
+        }
+
+        .poptip2::before,
+        .poptip2::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .poptip2::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: var(--triangle) var(--triangle) var(--triangle) 0 ;
+            border-color:  transparent var(--poptipBg)  transparent transparent;
+            left:110%;
+            bottom: -30%;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .poptip2::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: 160%;
+            bottom: calc(-100% - var(--distance));
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--poptipBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .poptip2:hover::before,
+        .poptip2:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+
+<body>
+   
+        <div class="poptip btn" aria-controls="弹出气泡弹出气泡弹出气泡弹出气泡弹出气泡">
+            <div class="poptip1" aria-controls="弹出气泡">
+                <div class="poptip2" aria-controls="弹出气泡">
+            气泡提示
+    </div>
+    </div>
+    </div>
+   
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/20211210-css19\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo1.html" "b/\344\275\234\344\270\232/20211210-css19\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..31036d8f20bbfa44d8efe51c8b9082a300dd5d32
--- /dev/null
+++ "b/\344\275\234\344\270\232/20211210-css19\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo1.html"
@@ -0,0 +1,80 @@
+<!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>
+       .close{
+            width: 500px;
+            display: flex;
+            justify-content: space-around;
+       }
+        input[type="checkbox"]{
+            display: none;
+        }
+
+        input[type="checkbox"] + label{
+            position: relative;
+            width: 50px;
+            height: 26px;
+            background: lightgrey;
+            border-radius: 13px;
+            cursor: pointer;
+            transform: background .5s
+        }
+        input[type="checkbox"] + label::before{
+            content: '关';
+            font-size: 10px;
+            line-height: 1;
+            top: 5px;
+            left: 28px;
+            color: white;
+            transition: all .5s;
+            position: absolute;
+        }
+        input[type="checkbox"] + label::after{
+            content: '';
+            width: 24px;
+            height: 24px;
+            top: 1px;
+            left: 1px;
+            border-radius: 12px;
+            background: white;
+            transition: all .5s;
+            position: absolute;
+        }
+        input[type="checkbox"][disabled] +label{
+            cursor: not-allowed;
+            opacity: .5;
+        }
+        input[type="checkbox"]:checked+label {
+            background: #b49378c7;
+        }
+
+        input[type="checkbox"]:checked+label::before {
+            content: '开';
+            left: 6px;
+        }
+
+        input[type="checkbox"]:checked+label::after {
+            left: 25px;
+        }
+    </style>
+</head>
+<body>
+    
+    
+     <div class="close">
+        <input type="checkbox" name="checkbox" id="r1" checked hidden>
+    <label for="r1"></label>
+
+    <input type="checkbox" name="checkbox" id="r3" disabled hidden>
+    <label for="r3"></label>
+    
+    <input type="checkbox" name="checkbox" id="r2" checked disabled hidden>
+    <label for="r2"></label>
+    
+    </div> 
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/20211210-css19\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo2.html" "b/\344\275\234\344\270\232/20211210-css19\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..696627556f2e4d240b6670b20a7b313e1307ec93
--- /dev/null
+++ "b/\344\275\234\344\270\232/20211210-css19\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo2.html"
@@ -0,0 +1,65 @@
+<!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>
+        .close{
+            width: 300px;
+            display: flex;
+            justify-content: space-around;
+        }
+        input[type="checkbox"]{
+            display: none;
+        }
+        label{
+            position: relative;
+            width: 50px;
+            height: 26px;
+            border-radius: 13px;
+            background-color: rgba(128, 128, 128, 0.26);
+            border: 1px solid rgba(0, 0, 0, 0.397);
+            cursor: pointer;
+            transform: background .5s;
+        }
+        label::before{
+            content: '关';
+            top: 4px;
+            left: 30px;
+            line-height: 1;
+            font-size: 14px;
+            color: white;
+            position: absolute;
+            transition: all .5s;
+        }
+        label::after{
+            content: '';
+            top: 1px;
+            left: 1px;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            background-color: white;
+            position: absolute;
+            transition: all .5s;
+        }
+        input[type="checkbox"]:checked + label{
+            background-color: orange;
+        }
+        input[type="checkbox"]:checked + label::before{
+            content: '开';
+            left: 6px;
+        }
+        input[type="checkbox"]:checked + label::after{
+            left: 24px;
+        }
+    </style>
+</head>
+<body>
+    <div class="close">
+        <input type="checkbox" name="checkbox1" id="c1">
+        <label for="c1"></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
