单行省略
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);
}