CSS效果（工作中常用）

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的声明

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

/* 超过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);
}