常用的CSS效果（1）

单行省略

overflow: hidden;            
text-overflow: ellipsis;      
white-space: nowrap;         

多行省略

display:-webkit-box;   
overflow: hidden;           
text-overflow: ellipsis;   
-webkit-box-orient:vertical; 
-webkit-line-clamp:3;

三角形

.three::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border:10px solid transparent;
    border-color: red blueviolet gold blanchedalmond;
}

阴影

单侧阴影

.top{
    box-shadow: 0 -8px 12px -9px #e5e5e5;
}

.right{
    box-shadow: 8px 0px 12px -9px #e5e5e5;
}

.bottom{
    box-shadow: 0 9px 12px -9px #e5e5e5;
}

.left{
    box-shadow: -10px 0px 12px -9px #e5e5e5;
}

常用阴影

.s1{
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 12%);
}

.s2{
    box-shadow: 2px 2px 8px 0 #e8e8e8, -2px 2px 8px 0 #e8e8e8;
}

.s3{
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
}

渐变背景色

直线渐变

.b1{
    background: #833ab4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.b2{
    background: #833ab4;  /* fallback for old browsers */
    background: -webkit-repeating-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
    background: repeating-linear-gradient(to right, #fcb045 10px, #fd1d1d 20px, #833ab4 30px); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

径向渐变

.b3{
    background-image: radial-gradient(circle, #f01d1d, #e38282, #e3d8d8);
}
.b4{
    background-image: repeating-radial-gradient(#ff7373, #c31f1f 18px);
}