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;
                        
                    

flex

                        
    flex-shrink: 0; // 比例不缩小

    flex-grow: 0; // 即使有剩余空间 比例不放大

    flex-basis: width; // 固定空间

    flex-wrap: wrap; // 换行，第一行在上方
                        
                    

CSS img等比例自动缩放

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

解决img、background缩小变模糊

                        
    img,.bg {
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
    }
                        
                    

解决img、background放大变模糊

                        
    img,.bg {
        image-rendering: pixelated;
    }
                        
                    

背景渐变

                        
    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;
                        
                    

彩色文本渐变

                        
    background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    -webkit-animation: slide 2s infinite linear;
    animation: slide 5s infinite linear;
                        
                    

悬挂缩进

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

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-scrollbar {
        display: none;
    }
						
					

禁止选中文本

						
    -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);
                        
                    

keyframes 动画定义

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

媒体查询定义

                        
    @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) {
        //...
    }
                        
                    

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