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

悬挂缩进

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

B. 样式类:

file文件选择框样式

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

    }
                        
                    

ploceholder样式

                        
    input::-webkit-input-placeholder{

    }
                        
                    

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

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

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