13、CSS樣式效果 · 知識點整理

#### 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; } ```