CSS代码片段

A. 效果类:

CSS 单行文本超出显示省略号

                        
    width: 200px; //宽度必须
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
                        
                    

CSS 多行文本超出显示省略号

                        
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; //x为行数,任意整数
    overflow: hidden;
                        
                    

CSS img等比例自动缩放

                        
    img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
                        
                    

背景渐变

                        
    background: -webkit-linear-gradient(top, #133907, #0a2b00);
    
    background: linear-gradient(270deg, rgba(251,148,108,1) 0%, rgba(227,32,49,1) 100%);
                        
                    

文本渐变

                        
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
                        
                    

悬挂缩进

                        
    text-indent: -2em;
    padding-left: 2em;
                        
                    

对齐两端文本

                        
    text-align-last: justify;
                        
                    

左右栏高度一致

                        
    .wrap{
        overflow: hidden;
    }
    .left{
        float: left;
        margin-bottom: -10000px;
        padding-bottom: 10000px;
    }
    .right{
        float: left;
        margin-bottom: -10000px;
        padding-bottom: 10000px;
    }
                        
                    

B. 样式类:

iPhone X/11/12 兼容

                        
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

    /* 重点:viewport-fit=cover */
                        
                    
                        
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
                        
                    

禁止选中文本

						
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
						
					

鼠标不可点击样式

						
    cursor: not-allowed;
						
					

input focus

						
    // focus
    border-color: #50C3F7;
    box-shadow: 0 0 8px 0 rgba(80, 195, 247, 0.4);

    // error
    border-color: #F72D51!important;
    box-shadow: 0 0 8px 0 rgba(247, 45, 81, 0.4);
						
					

file文件选择框样式

                        
    input::-webkit-file-upload-button{

    }
                        
                    

placeholder样式

                        
    input::-webkit-input-placeholder{

    }
                        
                    

placeholder颜色

                        
    input{
        -webkit-text-fill-color: blue;
    }
                        
                    

input placeholder没有垂直居中问题

                        
    input{
        line-height: normal
    }
                        
                    

input光标颜色

                        
    input{
        caret-color: red;
    }
                        
                    

文本选中颜色

                        
    ::selection{
        background: #f00;
        color: #fff;
    }
                        
                    

去掉手持设备点击时出现的透明层

                        
    a,button,input{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
    }
                        
                    

去掉移动端 input 输入框上方内阴影

                        
    input,textarea{
        -webkit-appearance: none;
    }
                        
                    

增加滑动弹性

                        
    -webkit-overflow-scrolling: touch;
                        
                    

高度自动计算

                        
    height: calc(100vh - 0.88rem);
                        
                    

C. 动画类

keyframes 动画定义

                        
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
                        
                    

D. 媒体查询

媒体查询定义

                        
    @media screen and (max-width: 1600px) {
        //...
    }

    @media screen and (max-width: 1440px) {
        //...
    }

    @media screen and (max-width: 1366px) {
        //...
    }

    @media screen and (max-width: 1280px) {
        //...
    }

    @media screen and (max-width: 1024px) {
        //...
    }
                        
                    

E. 组件效果

Toast

                        
    .mask-toast{
        position: fixed; top: 50%; left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: #444;
        background: rgba(0,0,0,.6);
        border-radius: 3px;
        padding: 15px 40px;
        color: #fff;
    }