積小流以成江海，很多東西你不總結就不是你的東西

常用css總結：

?

/*設置字體*/@font-face {font-family: 'myFont';src: url('../font/myFont.eot');src: url('../font/myFont.eot?#iefix') format('embedded-opentype'), url('../font/myFont.woff2') format('woff2'), url('../font/myFont.woff') format('woff'), url('../font/myFont.ttf') format('truetype'), url('../font/myFont.svg#square721_cn_btroman') format('svg');font-weight: normal;font-style: normal;}/*clearfix清楚浮動*/.clearfix {*zoom: 1;}.clearfix:after {content: "\0020";display: block;visibility: hidden;clear: both;height: 0;overflow: hidden;}/*給input的placeholder設置顏色*/::-webkit-input-placeholder {/* WebKit browsers */color: #999;}:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #999;}::-moz-placeholder {/* Mozilla Firefox 19+ */color: #999;}:-ms-input-placeholder {/* Internet Explorer 10+ */color: #999;}/*文本框焦點狀態：沒有藍框*/.input{outline:none;}/*透明度設置*/.opacity {opacity: .9;filter: alpha(opacity=90)}/*超出文本顯示省略號*/.elips {display: bolck;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/*多行文本顯示省略號，這個只支持chrome瀏覽器*/.elipsMoreLine {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width: 100px;height: 40px;line-height: 20px;}/*多行文本顯示省略號的，跨瀏覽器兼容，設置元素的高度，用包含省略號(…)的偽類元素模擬實現*/p {position: relative;line-height: 20px;height: 40px;overflow: hidden;}p::after {content: "...";font-weight: bold;position: absolute;bottom: 0;right: 0;padding: 0 20px 1px 45px;background-color: #fff;}/*去掉移動端，a標簽點擊產生的陰影虛框*/a {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}/*強制不換行*/div{white-space:nowrap;}/*強制換行*/p{word-wrap: break-word; word-break: normal; }/*單詞斷行*/p{word-break:break-all; }/*常用偽類*/div:after{content:'';display:block;position:absolute;};div:before{content:'';display:block;position:absolute;}.selector:first-child{/*選擇第一個子元素*/}.selector:last-child{/*選擇最后一個子元素*/}.selector:first-letter{/*設置第一字符的樣式*/}.selector:nth-of-type(n){}.selector:nth-of-type(2n){}.selector:nth-of-type(2n+1){}/*設置文本的間距*/.txt{letter-spacing:2em;}/*影藏文本*/.hiddentxt{text-indent:999em;overflow:hidden;}/*全屏遮罩背景*/.mask {background: #111;position: fixed;width: 100%;height: 100%;opacity: 0.8;filter: alpha(opacity=80);z-index: 100;top: 0;left: 0;}/*修正img產生的3像素的bug*/img {border: 0;display: inline-block;vertical-align: middle;}/*解決ie6下浮動的雙倍間距bug*/.fl {float: left;_display: inline}.fr {float: right;_display: inline}/*陰影效果*/.shadow {-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);box-shadow: 0 1px 1px rgba(0, 0, 0, .2);}/*模糊遮罩效果*/.blur{-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);filter: blur(3px);}/*從上到下的漸變效果*/.gradent{background: -webkit-linear-gradient(#ed5a5e, #ed3a61);background: -o-linear-gradient(#ed5a5e, #ed3a61); background: -moz-linear-gradient(#ed5a5e, #ed3a61); background: linear-gradient(#ed5a5e, #ed3a61);}/*從左到右的漸變*/.gradent2{background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/}/*從左上角，到右下角的漸變*/.gradent3{background: -moz-linear-gradient(left top, #ace, #f96);background: -webkit-linear-gradient(left top, #ace, #f96);background: -o-linear-gradient(left top, #ace, #f96);}/*指定角度的漸變*/.gradent4{background: -moz-linear-gradient(45deg, #ace, #f96);background: -webkit-linear-gradient(45deg, #ace, #f96);background: -o-linear-gradient(45deg, #ace, #f96);}/*怪異盒模型,這種模式下增加padding和邊框值，元素的寬度不會增加*/.box {box-sizing: border-box;-moz-box-sizing: border-box;/* Firefox */-webkit-box-sizing: border-box;/* chrome */}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/*transition過渡效果:第一個參數為某個屬性，第二參數為動畫執行的時間，第三個參數為動畫的效果速度曲線，第四個參數為動畫延遲多久執行*/.transition{transition: all 1s linear 2s;-moz-transition:all 1s linear 2s;-webkit-transition:all 1s linear 2s;-o-transition:all 1s linear 2s;}/*transform效果:translate(x,y);translate3d(x,y,z);translateX(30px);translateY(30px);translateZ(30px);scale(x,y);scale3d(x,y,z);scaleX(1.2);scaleY(1.2);scaleZ(1.2);rotate(angle);rotate3d(x,y,z,angle);rotateX(angle);rotateY(angle);rotateZ(angle);skew(x-angle,y-angle);skewX(angle);skewY(angle);perspective;三維空間。*/.transform{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /* Opera */}/*animation keyframes幀動畫*//*如下：第一個參數，幀動畫的名稱，第二個參數，動畫執行的時間，第三個參數，動畫運動的速度曲線，ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。第四個參,動畫延遲執行的時間。第五個參數，規定動畫播放的次數，infinite是循環無限播放，第六個參數，規定是否應該輪流反向播放動畫。第七個參數：animation-fill-mode: forwards(動畫結束之后保持在最后一幀的狀態) backwards(動畫結束之后保持在第一幀) ;*/.shakeAni{-webkit-animation: shake 0.5s ease-in-out 3s infinite alternate; -moz-animation: shake 0.5s ease-in-out infinite alternate; animation: shake 10.5s ease-in-out infinite alternate; }@keyframes shake {from {transform:translateX(-10px);}to {transform:translateX(10px);}/*或者使用%寫多個不同的區段*/0% {transform:translateX(-10px);}25% {transform:translateX(10px);}50% {transform:translateX(-10px);}75% {transform:translateX(10px);}100% {transform:translateX(10px);}}@-moz-keyframes shake{from {-moz-transform:translateX(-10px);}to {-moz-transform:translateX(10px);}}/* @-ms-keyframes shakeX {from {-m-transform:translateX(-@10px);}to {-m-transform:translateX(@10px); }} */@-webkit-keyframes shake{from {-o-transform:translateX(-10px); }to {-o-transform:translateX(10px);}}@-o-keyframes shake{from {-webkit-transform:translateX(-10px);}to {-webkit-transform:translateX(10px);}}/*css3的方式進行水平豎直居中*/.hvCenter {position: fixed;left: 50%;top: 50%;z-index: 200;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-sizing: border-box;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);}/*css居中的方法還有很多，有空再整理總結*//*移動端常用設備的媒體查詢*/@media(max-width:320px){}@media(min-width:321px) and (max-width:639px){}@media(min-width:640px) and (max-width:767px){}@media(min-width:768px) and (max-width:1023px){}@media(min-width:1024px) and (max-width:1200px){}@media(min-width:1200px) and (max-width:1679px){//筆記本}@media(min-width:1680px){ //臺式機}/*后續繼續整理填充*/

　　

轉載于:https://www.cnblogs.com/xinggood/p/6610126.html

總結

以上是生活随笔為你收集整理的非常有用的css使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。