#### 1、图片与文字对齐： * * * * * ~~~ vertical-align:middle; 设置各对象的vertical-align属性，属性说明： baseline－将支持valign特性的对象的内容与基线对齐 sub－垂直对齐文本的下标 super－垂直对齐文本的上标 top－将支持valign特性的对象的内容与对象顶端对齐 text-top－将支持valign特性的对象的文本与对象顶端对齐 middle－将支持valign特性的对象的内容与对象中部对齐 bottom－将支持valign特性的对象的文本与对象底端对齐 text-bottom－将支持valign特性的对象的文本与对象顶端对齐 ~~~ #### 2、背景颜色渐变： * * * * * ~~~ background: -webkit-linear-gradient(to bottonm, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(to bottonm, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(to bottonm, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottonm, red, blue); /* 标准的语法 */ ~~~ #### 3、字体颜色渐变 * * * * * ~~~ background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ed1b24),color-stop(44%,#ed1b24), color-stop(44%,#a5080d),to(#a5080d)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; ~~~ #### 4、水波纹效果 ***** ``` //页面布局 <div class="dot"> <div class="dot3">每日签到</div> </div> //样式 .dot { animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot3 { animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot,.dot3{ height: 100px; width: 100px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; border-radius: 100%; position: absolute; z-index: 10; animation-iteration-count:infinite; background: transparent; } @keyframes sploosh { 0% { box-shadow: 0 0 0 0px rgba(255,0,0, 0.7); background: rgba(255, 0,0, 0.7); } 100% { box-shadow: 0 0 0 60px rgba(255, 0,0, 0); background: rgba(255, 0,0, 0); } } @keyframes sploosh3 { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 255, 0.7); background: rgba(0, 0, 255, 0.7); } 100% { box-shadow: 0 0 0 30px rgba(0, 0, 255, 0); background: rgba(0, 0, 255, 1); } } ``` #### 5、超出部分滚动且隐藏滚动条 ***** ``` body{ width: 800px; height: 500px; overflow-x: hidden; overflow-y: scroll; } body::-webkit-scrollbar{ display: none; } ``` #### 6、清除浮动 ***** ``` .clearfix::after { content: ""; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; } .clearfix{ zoom: 1; } ``` #### 7、移动端点击去掉阴影 ***** ``` *{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } ```