• 非常有用的css使用总结


    积小流以成江海,很多东西你不总结就不是你的东西

    常用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: "020";
            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;
             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;
             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-320px)
    	{
    	}
    	@media(min-321px) and (max-639px)
    	{
    	}
    	@media(min-640px) and (max-767px)
    	{
    	}
    	@media(min-768px) and (max-1023px)
    	{
    	}
    	@media(min-1024px) and (max-1200px)
    	{
    	}
    	@media(min-1200px) and (max-1679px)
    	{
    	   //笔记本
    	}
    	@media(min-1680px)
    	{ 
    	  //台式机
    	}
        /*后续继续整理填充*/
    

      

  • 相关阅读:
    MySQL 中视图和表的区别以及联系是什么?
    MAC将根目录文件夹的权限赋给用户
    PHP 基础篇 PHP 中 DES 加解密详解
    软件构架师必修科(转)
    遍历指定文件夹下所有的xml文件并动态生成HTML页面!
    使用XML创建Excel文档
    XmlTextWriter创建XML文件
    什么是耦合?
    JavaScript经典效果集锦(一)
    软件最大的追求是什么?
  • 原文地址:https://www.cnblogs.com/xinggood/p/6610126.html
Copyright © 2020-2023  润新知