【CSS】奇怪笔记

自己定个变量css

.#{$name}article-box{
	--bg-color: rgb(241, 241, 241) ;        //定义一个颜色
	.el-container {
	    background-color: var(--bg-color);  //引用这个颜色
	}
}

添加文字阴影(css3)
参数：颜色、上下、左右、有多晕

text-shadow: rgb(65, 64, 64) 3px 4px 3px;

添加div阴影(css3)
filter: drop-shadow 滤镜

.article-box{
    -webkit-filter: drop-shadow(3px 3px 3px rgba(151, 151, 151, 0.5));
    filter: drop-shadow(3px 3px 3px rgba(151, 151, 151, 0.5));
}

常见的阴影 box-shadow

.el-aside {
    background-color: var(--bg-color) ;
    box-shadow: 0px 0px  0px  0px !important; 
}

匹配同类型中的第n个同级兄弟元素的背景色nth-of-type(css3)

table{
   tr{
      td{
           &:first-of-type{
               width: 8em;
               background:#fafafa;
           }
           &:nth-of-type(3){
               width: 8em;
               background:#fafafa;
           }
       }
   }
}

获取屏幕宽度
css:

@media (max-width: 580px) {
  .list-description {
    width: 80%;
    margin-top: 2vh;
  }
}

js:

console.log(window.screen.width)

echarts好看的颜色

itemStyle: {
   color: {
       type: 'linear',
       x: 0,
       y: 0,
       x2: 0,
       y2: 1,
       colorStops: [ {
           offset: 0, color: 'rgb(171, 196, 251)' // 100% 处的颜色
       },{
           offset: 1, color: 'rgb(224, 188, 253)' // 0% 处的颜色
       }],
       global: false // 缺省为 false
   }
}

methods:修改table tr行的背景色

<el-table :row-style="tableRowStyle">
....
tableRowStyle({ row, rowIndex }) {
   return 'background-color: pink'
},

用饿了么表格框架 表格内容居中 最后一个表格居左
1、要加.cell
2、使用:last-child

/deep/ .el-table th > .cell {
  text-align: center;
}
/deep/ .el-table .cell {
  text-align: center;
  font-size: 14px;
}
/deep/ .el-table td:last-child .cell{
  text-align: left;
  font-size: 14px;
}

隐藏滚轮（在全局index.scss下写

// 只有最大框没有滚轮
body::-webkit-scrollbar {
  width: 0!important;
}
// 全部没有滚轮（包括页面、表格等
*{
	::-webkit-scrollbar {
		display: none;
	}
}

添加横向可滚动 但隐藏滚动轴

<div class="top-menu">
        <el-menu style="overflow-x: scroll;display: flex;flex-wrap: nowrap;">...</el-menu>
</div>

.top-menu::-webkit-scrollbar {
  display: none;
}