CSS应用梳理

1. 文字溢出省略号

　　1.1 单行文字溢出：

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

　　1.2 多行文字溢出：

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

2. CSS变量

:root {
  --r-color: red;
}
.body {
  background-color: var(--r-color);
}

3. 渐变

　　3.1.1 背景-线性渐变

//渐变(默认方向：从上到下)
background-image: linear-gradient(blue, red);
//渐变(指定方向)
background-image: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));
//渐变(角度)
background-image: linear-gradient(45deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

　　3.1.2 背景-径向渐变

//默认椭圆形的径向渐变
#grad {
  background-image: radial-gradient(red, yellow, green);
}
//指定圆形径向渐变
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}
//颜色分布
#grad {
  background-image: radial-gradient(circle, red 10%, yellow 50%, green 100%);
}

　　3.2 边框-线性渐变

.border-box {
  width: 100px;
  height: 100px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

4. 三角形

//4个
.triangle {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: red green yellow blue;
}

//1个
.triangle {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent transparent red;
}