线性渐变，径向渐变，盒子阴影，文字溢出处理

线性渐变

    div{
        width: 200px;
        height: 200px;
        background: linear-gradient(to bottom,red,green,yellow);
        /* 从上往下渐变    to bottom*/
        /* 从下往上渐变    to top */
        /* 从左往右渐变    to right */
        /* 从右往左渐变    to left */
        /* 从右上往左下    to left bottom */
        /* 从左下往右上    to right top */
    }
    

径向渐变

 div{
            width: 200px;
            height: 200px;
            /* 从中心点渐变 */
            /* 可以添加百分比代表渐变的范围 */
            background: radial-gradient(red,blue,green);
        }
        

盒子阴影

    div{
        width: 200px;
        height: 200px;
        border: 3px solid blue;
        margin: 100px auto;

        /* 不设置inset默认为外阴影，设置inset变成内阴影 */
        /* box-shadow:x轴 y轴 模糊半径大小 颜色 ; */
        box-shadow:inset 0 0 50px yellow ;
    }
    
    

文字溢出处理

    div{
        width: 100px;
        height: 50px;
        border: 1px solid black;
        margin: 30px auto;
        /* 溢出文本隐藏 */
        overflow: hidden;
        /* 表示超出的文本用省略号表示 */
        text-overflow:ellipsis ;
        /* 文本不换行，在同一行显示*/
        white-space:nowrap;
    }