1、css文字溢出省略号

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

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

2、渐变

/* 渐变(方向) */
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));/* 渐变(角度) */
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

/* border有个border-image的属性，类似background也有个background-image一样,
通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量 */
.border-grident{margin-top: 20px;width: 200px;height: 200px;border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

.text {background: linear-gradient(to right, #ff5500, #ffd200);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

3、css伪类三角形

.triangle {width: 0;height: 0;border: 100px solid;border-color: orangered skyblue gold yellowgreen;
}
/* 向下的三角形 */
.down-triangle {width: 0;height: 0;border-top: 50px solid skyblue;border-right: 50px solid transparent;border-left: 50px solid transparent;
}

4、媒体查询

页面头部必须有meta关于viewport的声明

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

通常在做响应式布局的时候，以及大屏的时候很常用的，从而实现在不通分辨率下，实现不同的展示效果

/* 超过1920分辨率后显示多列 */
@media screen and (min-width:1920px) {.car_box.el-card {min-width: 450px !important;width: 450px !important;}
}

5、elementui样式修改的几种方式:

在vue3中已经弃用/deep/，使用 ::v-deep 代替 /deep/

需要注意的是，::v-deep只适用于Vue 3及以上版本，如果使用的是Vue 2或以下版本，仍然需要使用/deep/选择器。

/*  第一种/deep/ */
/deep/ .test {***
}/*  第二种::v-deep */
::v-deep .test{***
}

① 修改表格头部背景:

::v-deep .el-table th{background: orange;
}

② 修改表格行背景:

::v-deep .el-table tr{background: #eee;
}

③ 修改斑马线表格的背景：

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {background: #ccc;
}

④ 修改行内线的颜色：

::v-deep .el-table td,.building-top .el-table th.is-leaf {border-bottom:  2px solid #eee;
}

⑤ 修改表格最底部边框颜色和高度：

::v-deep .el-table::before{border-bottom:  1px solid #ccc;height: 3px
}

⑥ 修改表头字体颜色：

::v-deep .el-table thead {color: #ccc;font-weight: 700;
}

⑦ 修改表格内容字体颜色和字体大小：

::v-deep .el-table{color: #6B91CE;font-size: 14px;
}

⑧ 修改表格无数据的时候背景，字体颜色

::v-deep .el-table__empty-block{background: #ccc;
}
::v-deep .el-table__empty-text{color: #fff
}

⑨ 修改表格鼠标悬浮hover背景色

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {background-color: pink;
}

6、禁用鼠标事件

.disabled {	pointer-events: none;	cursor: default;	opacity: 0.6;	
}

7、网格布局

使用CSS网格布局可以轻松创建复杂的网格结构，实现灵活的页面布局。通过定义网格容器和网格项，你可以精确控制元素的位置和大小。

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;
}.grid-item {grid-column: span 2;grid-row: span 1;
}

8、自定义滚动条

/*滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/height: 6px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 8px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);background: #c7cecd;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/background: none;
}

9、阴影效果

调整阴影的颜色、模糊程度和偏移量

.box {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

10、图片模糊效果

使用CSS的filter属性中的blur函数为图片添加模糊效果。

.image {filter: blur(5px);
}