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);
}
