diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215\347\273\203\344\271\240.html" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215\347\273\203\344\271\240.html"
new file mode 100644
index 0000000000000000000000000000000000000000..29cc261892f51fe64a67ba15b0d27dc8d6232a02
--- /dev/null
+++ "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215\347\273\203\344\271\240.html"
@@ -0,0 +1,163 @@
+<!-- 创建一个在其父级容器中水平、垂直居中的绝对定位元素，如下效果 -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Centered Absolute Positioning</title>
+    <style>
+        
+        .parent-container {
+            position: relative;
+            width: 100%; 
+            height: 900px; 
+            background-color: #f0f0f0; 
+        }
+
+        
+        .centered-element {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 400px; 
+            height: 400px; 
+            background-color: greenyellow; 
+        }
+    </style>
+</head>
+<body>
+    <div class="parent-container">
+        <div class="centered-element">
+          
+        </div>
+    </div>
+</body>
+</html>
+
+
+
+
+
+
+
+<!-- 在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容 -->
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>简单固定顶部导航条</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: 'Microsoft YaHei', Arial, sans-serif; /* 使用微软雅黑字体 */
+        }
+
+        .fixed-nav {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background-color: #333;
+            color: white;
+            text-align: center;
+            padding: 10px 0;
+            z-index: 1000; /* 确保导航条在最上层 */
+        }
+
+        .main-content {
+            padding-top: 60px; /* 为主要内容区域添加上边距，防止被导航条遮挡 */
+        }
+    </style>
+</head>
+<body>
+    <div class="fixed-nav">
+            顶部导航条
+    </div>
+
+    <div class="main-content">
+        
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+        <p>这部分内容不会被顶部导航条遮挡。</p></br>
+
+
+       
+    </div>
+</body>
+</html>
+
+
+
+
+
+<!-- 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示 -->
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>悬浮提示框</title>
+    <style>
+        .tooltip {
+            position: relative; /* 设置相对定位 */
+            display: inline-block; /* 使元素为行内块级元素 */
+        }
+
+        .tooltip .text {
+            visibility: hidden; 
+            width: 120px; 
+            background-color: black; 
+            color: #fff; 
+            text-align: center; 
+            border-radius: 6px; 
+            padding: 5px 0;
+            position: absolute; 
+            z-index: 1; 
+            bottom: 100%; 
+            left: 50%; 
+            transform: translateX(-50%); 
+            opacity: 0; 
+            transition: opacity 0.3s; 
+        }
+
+        .tooltip:hover .text {
+            visibility: visible; 
+            opacity: 1; 
+        }
+    </style>
+</head>
+<body>
+
+<div class="tooltip">昂，你来晚了哈<span class="text">我是提示文字撤</span></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20231010221623.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20231010221623.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5bcddb4c7afead15912d00421a1f12a05046fe3e
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20231010221623.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20231010221714.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20231010221714.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20231010221714.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20241023-\347\273\203\344\271\240.html" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20241023-\347\273\203\344\271\240.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6db1c06c997efdf5750f632fef3f4dfd320fd367
--- /dev/null
+++ "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/20241023-\347\273\203\344\271\240.html"
@@ -0,0 +1,203 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>精灵图</title>
+
+    <style>
+
+ 
+
+        .d1{
+            background-position: -2px 0px;
+            width: 76px;
+            height: 76px;
+            background-image: url(./精灵图.png);
+            background-repeat: no-repeat;
+           
+          
+        }
+
+        .d2{
+            background-position: -83px 0px;
+            width: 76px;
+            height: 76px;
+            background-image: url(./精灵图.png);
+            background-repeat: no-repeat;
+           
+        }
+
+        .d3{
+            background-position: -161px 0px;
+            width: 76px;
+            height: 76px;
+            background-image: url(./精灵图.png);
+            background-repeat: no-repeat;
+           
+        }
+
+        .d4{
+            background-position: -1px -83px;
+            width: 76px;
+            height: 76px;
+            background-image: url(./精灵图.png);
+            background-repeat: no-repeat;
+           
+        }
+
+        .d5{
+            background-position: -80px -83px;
+            width: 76px;
+            height: 76px;
+            background-image: url(./精灵图.png);
+            background-repeat: no-repeat;
+           
+        }
+
+        .d6{
+            background-position: -160px -83px;
+            width: 76px;
+            height: 76px;
+            background-image: url(./精灵图.png);
+            background-repeat: no-repeat;
+           
+        }
+
+        
+        .d1t{
+            width: 304;
+            height: 76px;
+            font-size: 300%;
+            background-color: white;
+            margin-left: 76px;
+        }
+
+        .d2t{
+            width: 304;
+            height: 76px;
+            font-size: 300%;
+            background-color: white;
+            margin-left: 76px;
+        }
+
+        .d3t{
+            width: 304;
+            height: 76px;
+            font-size: 300%;
+            background-color: white;
+            margin-left: 76px;
+        }
+
+        .d4t{
+            width: 304;
+            height: 76px;
+            font-size: 300%;
+            background-color: white;
+            margin-left: 76px;
+        }
+
+
+        .d5t{
+            width: 304;
+            height: 76px;
+            font-size: 300%;
+            background-color: white;
+            margin-left: 76px;
+        }
+        .d6t{
+            width: 304;
+            height: 76px;
+            font-size: 300%;
+            background-color: white;
+            margin-left: 76px;
+        }
+
+
+
+
+
+
+
+    </style>
+
+
+</head>
+
+<body>
+    <div class="d1">
+        <div class="d1t">付款图标</div>
+    </div>
+        
+    <div class="d2">
+        <div class="d2t">存款图标</div>
+    </div>
+
+    <div class="d3">
+        <div class="d3t">删除图标</div>
+    </div>
+
+    <div class="d4">
+        <div class="d4t">存款图标</div>
+    </div>
+
+    <div class="d5">
+        <div class="d5t">笑脸图标</div>
+    </div>
+
+    <div class="d6"> 
+        <div class="d5t">编辑图标</div>
+    </div>
+
+</body>
+</html>
+
+<!-- 电影 
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+	<style type="text/css">
+		.box{
+			margin: 100px;
+			width: 308px;
+			height: 307px;
+			border: 1px solid #FF7E00;
+			position: relative;  /*子绝父相*/
+
+		}
+		.box .image img{
+			width: 308px;
+			height: 196px;
+		}
+		.box .dtc{
+			display: block;  /*转为块级元素，才能设置span的宽高*/
+			width: 52px;
+			height: 28px;
+			background-image: url(http://img.smyhvae.com/20180116_1115.png);
+			background-position: -108px 0px; /*这里用到了精灵图*/
+			position: absolute;  /*采用绝对定位的方式，将精灵图盖在最上层*/
+			top: -9px;
+			left: 13px;
+		}
+		.box h4{
+			background-color: black;
+			color: white;
+			width:308px;
+			height: 40px;
+			line-height: 40px;
+			position: absolute;
+			top: 156px;
+		}
+	</style>
+</head>
+<body>
+	<div class="box">
+		<span class="dtc"></span>
+		<div class="image">
+			<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
+		</div>
+		<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h4>
+	</div>
+</body>
+</html>-->
\ No newline at end of file
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/\344\270\207\350\276\276\345\275\261\345\237\216.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/\344\270\207\350\276\276\345\275\261\345\237\216.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/\344\270\207\350\276\276\345\275\261\345\237\216.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/\347\262\276\347\201\265\345\233\276.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/\347\262\276\347\201\265\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..00138ea2a9ec09abba06e7f0a3bde57b05342cc6
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250/\347\262\276\347\201\265\345\233\276.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/1.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/1.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/2.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/2.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\347\273\203\344\271\240.html" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\347\273\203\344\271\240.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d87d94b26c5f8171c9ae270c34c7cd8dac2ba234
--- /dev/null
+++ "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\347\273\203\344\271\240.html"
@@ -0,0 +1,120 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+
+        *{
+            padding: 0;
+            margin: 0;
+            background-color: white;
+        }
+        .big{
+
+            height: 250;
+            width: 720px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            
+        }
+        
+
+        .d{
+            float: left;
+            margin-left: 10px;
+
+        }
+
+
+        .d:hover{
+            box-shadow: 5px 5px 5px 5px #999;
+
+        }
+
+
+
+        .Orange{
+
+            width: 230px;
+            height: 50px;
+            background-color: white;
+            transition: width 2s linear 0s;
+
+        }
+        
+
+        .Orange：hover{
+            width: 230px;
+            background-color: orange;
+        }
+
+
+        
+
+    </style>
+
+</head>
+<body>
+<div class="big">
+
+    <div class="d">
+        <img src="./1.png" alt="">
+
+        <div class="Orange"></div>
+
+    </div>
+
+    <div class="d">
+        <img src="./2.png" alt="">
+
+        <div class="Orange"></div>
+    </div>
+
+    <div class="d">
+        <img src="./3.jpg" alt="">
+
+        <div class="Orange"></div>
+    </div>
+
+</div>
+
+</body>
+</html>
+
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        .shark {
+            width: 509px;
+            height: 270px; /*盒子的宽高是一帧的宽高*/
+            border: 1px solid #000;
+            margin: 100px auto;
+            background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
+            animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧， */
+        }
+
+        @keyframes sharkRun {
+            0% {
+            }
+
+            /* 270 * 8 = 2160 */
+            100% {
+                background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="sharkBox">
+    <div class="shark"></div>
+</div>
+
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/3.jpg" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/3.jpg" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/y2.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/y2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f84193b70e597d0be795edb74e51885dbf9f43fc
Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241024\344\275\234\344\270\232/y2.png" differ
diff --git "a/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f0b8c385638c88fa3286e0055826d8bb8b399848
--- /dev/null
+++ "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,33 @@
+1. static（静态定位）
+默认值，元素遵循正常文档流，不受 top、bottom、left、right 的影响。
+
+2. relative（相对定位）
+元素相对于其正常位置进行偏移，其他元素仍然按照原位置布局。使用 top、bottom、left、right 属性可以调整位置，但原有空间仍然保留。
+
+3. absolute（绝对定位）
+元素相对于最近的已定位父元素进行定位。如果没有已定位的父元素，则相对于 <html> 元素。绝对定位的元素脱离文档流，不占用空间。
+
+4.fixed（固定定位）
+元素相对于浏览器窗口固定位置，即使页面滚动也不会改变位置。固定定位的元素同样脱离文档流，不占用空间。
+
+5.sticky（粘性定位）
+元素在正常文档流中定位，当页面滚动到特定阈值时，表现为固定定位。需要设置 top、right、bottom 或 left 属性之一才能生效。
+
+6.各种定位的具体功能
+static: 默认值，元素在正常流中。
+relative: 偏移不影响其他元素的位置。
+absolute: 脱离文档流，定位基点为最近的非 static 祖先元素。
+fixed: 脱离文档流，固定在视口中。
+sticky: 结合了相对和固定定位，依赖于用户的滚动位置。
+
+7.边偏移属性
+边偏移属性用于具体定位元素的位置，包括：
+top: 元素上边距。
+bottom: 元素下边距。
+left: 元素左边距。
+right: 元素右边距。
+
+8. 注意事项
+static 定位的元素不会响应 top、bottom、left、right 属性。
+绝对和固定定位的元素不会占用原有空间，可能导致其他元素重叠。
+粘性定位需要至少设置一个边偏移属性才能生效。
\ No newline at end of file
diff --git "a/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241023-\351\200\211\346\213\251\345\231\250.md" "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241023-\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..42a648c9af255c2c19e91381295b9e59691014bc
--- /dev/null
+++ "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241023-\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,47 @@
+## 属性选择器
+属性选择器的标志性符号是 []。
+
+匹配含义：
+
+^：开头  $：结尾  *：包含
+格式：
+
+E[title] 选中页面的E元素，并且E存在 title 属性即可。
+
+E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
+
+E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc
+
+
+
+
+### 结构伪类选择器
+伪类选择器的标志性符号是 :。
+
+CSS中有一些伪类选择器，比如:link、:visited、:hover、:active、:focus。
+
+CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。
+
+1、格式：（第一部分）（重要）
+
+E:first-child 匹配父元素的第一个子元素E。
+
+E:last-child 匹配父元素的最后一个子元素E。
+
+E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
+
+E:nth-child(odd) 匹配奇数
+
+E:nth-child(even) 匹配偶数
+
+E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
+
+
diff --git "a/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241024-\345\212\250\347\224\273.md" "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241024-\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7e7532ed2de152497f579924c1ee96aa3a025d77
--- /dev/null
+++ "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241024-\345\212\250\347\224\273.md"
@@ -0,0 +1,61 @@
+边框阴影：box-shadow 属性
+格式举例：
+
+	box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+
+	box-shadow: 15px 21px 48px -2px #666;
+
+
+
+## 动画
+
+
+### 过渡transition 包括以下属性：
+
+1. transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
+
+2. transition-duration: 1s; 过渡的持续时间。
+
+3. transition-timing-function: linear; 运动曲线。属性值可以是：
++ linear 线性
++ ease 减速
++ ease-in 加速
++ ease-out 减速
++ ease-in-out 先加速后减速
+
+4. transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
+
+
+上面的四个属性也可以写成综合属性：
+
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+	transition: all 3s linear 0s;
+
+
+
+### 转换
+2D转换具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
+
+转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
+
+2D转换包括：缩放、移动、旋转。
+我们依次来讲解。
+
+1. 缩放：scale
+格式：
+
+	transform: scale(x, y);
+
+	transform: scale(2, 0.5);
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+2. 位移：translate
+格式：
+
+	transform: translate(水平位移, 垂直位移);
+
+	transform: translate(-50%, -50%);
+
