css样式合集(遇到没有过用的少的就更新)

aa:[颜色1,颜色2,颜色3,颜色4,颜色5]
//在标签中动态设置样式
:style="{background:aa[index%5]}"
index是div的下标 5是颜色的长度

单行文本溢出隐藏并显示省略号

overflow:hidden; //溢出隐藏

white-space: nowrap; //超出不换行

text-overflow: ellipsis; //隐藏部分显示省略号

多行文本溢出隐藏并显示省略号

display: -webkit-box; //将对象作为弹性伸缩盒子模型显示

-webkit-box-orient: vertical; //从上到下垂直排列子元素

-webkit-line-clamp: 23; //限制显示行数

overflow: hidden; //溢出隐藏

元素内容超出高度时卷动并隐藏滚动条

overflow:scroll;//记得要设置高度,否则无法实现
高度的一种写法儿(目前常用)
height: calc(100% - 10px);//场景:一个div里面有两个盒子,一个高度10px,另一个就可以这样写
相当于它爹跟一个儿子分家了,分走10px高度,剩下的由另一个儿子继承
//注意:减号两边一定要有空格,还可以做加法



::-webkit-scrollbar {
/*隐藏滚动条*/
display: none;
}

textarea多行文本框的提示语placeholder的字体颜色,如果是input,就把textarea换成input

//这里是考虑到浏览器兼容问题
textarea::-webkit-input-placeholder {
	 color: #ccc
}
textarea::-moz-input-placeholder {
	color: #ccc;
}
textarea::-ms-input-placeholder {
	color: #ccc;
}

多行文本框取消拖拽功能

textarea { 

resize: none; //取消拖拽

outline: none;//去除选中时的边框

} 

element 导航栏箭头方向(右下)

/*菜单关闭*/
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(-90deg); 
	-ms-transform: rotate(-90deg);
	transform: rotateZ(-90deg); 
}
/*菜单展开*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(0deg); 
	-ms-transform: rotate(0deg);
	transform: rotateZ(0deg); 
}

div中的文本不允许选中

user-select : 这个属性可以控制盒子内的文本能否被选中

它的值有四个 :

auto 默认。如果浏览器允许，则可以选择文本。

none 防止文本选取。

text 文本可被用户选取。

all 单击选取文本，而不是双击。

cursor : 这个属性控制的是鼠标的样式

我常用的值有(可选值很多,更多的自行查找) :

cursor:pointer;鼠标变小手

default：标准箭头(这个是默认的)

点击元素时的样式(多用于点击更换背景色字体颜色)

aa::active{

background:red;

}

元素叠加覆盖时的点击穿透

当一个有点击事件的元素上覆盖了一个另一个元素时,下面这个元素的click就无法被触发

我们可以在上面的元素加这个属性       pointer-events: none; 可以使我们的点击穿透上面的元素

页面显示黑白色       filter: grayscale(1);

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(表单的没试过)和文字垂直对齐

baseline	默认，元素放置在父元素的基线上
top	把元素的顶端于行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

 

 css写一个三角形

.box2 {
	width: 0;
	height: 0;
    /* 当你的三角显示成等腰四边型的时候,加上宽度为零就好了 */
	border: 60px solid transparent;
	/* 要显示的一边改变颜色，其他边透明  */
	border-bottom-color: cyan;
    /*这是样写是四个三角形拼成的正方形
    /*border: 60px solid;
	border-top-color: cyan;
	border-right-color: red;
	border-bottom-color: green;
	border-left-color: blue;*/
}

行内元素/置换元素(图片/表单) 垂直居中:

vertical-align:top(值有多种,这里只是随意选了一种)

 选择除指定元素外的所有元素:

li:not(:first-child, :last-child){}

div斜切角 

background: linear-gradient(50deg, transparent 5px, #314db0 0) 0 100%;

//50deg:斜切角度
//transparent:切口长度

 css做节流(点击限制)

button{
  animation: throttle 2s step-end forwards;
}
button:active{
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

 动态类名

:class="['hu_title', tissue === 'JD' ? 'titleJD' : 'titleJW']

行内样式中使用变量 

:style="`left:calc(${percentage}% - 25px)`"

 加:表示动态设置style,在双引号中使用模板字符串,calc是计算属性可以不使用直接${变量}

多个div设置不同样式(背景色)

循环创建多个div,每个div用不同的背景色

可选链操作符(?.)

let a = {aa:1,b:2,c:{d:3}}
let b = a.c?.d
console.log(b)//3

let a = {aa:1,b:2,c:{dd:3}}
let b = a.c?.d
console.log(b)//undefined

如过参数不存在则返回undefined 

空值合并运算符(??)

//情景一
let a = {aa:1,b:2}
let b = a?.c??10086
console.log(b)//10086
//情景二
let a = {aa:1,b:2,c:3}
let b = a?.c??10086
console.log(b)

 如果c为null/undefined,则返回10086

两者结合 情景一:第一个参数(c)不存在可选链操作符返回的是 undefined,返回第二个参数(10086);情景二:第一个参数(c)存在,直接返回c

滚动条样式 

 //设置滚动条的宽度
  ::-webkit-scrollbar{
    width: 10px;
  }
  //将轨道改为蓝色并设置圆角边框
  ::-webkit-scrollbar-track{
    background-color: #2F7FFF;
    border-radius: 50px;
  }
  //将滑块颜色并设置圆角
  ::-webkit-scrollbar-thumb{
  background: #D45C00 !important;
  border-radius: 10px;
  }
  //悬停时滑块颜色
  ::-webkit-scrollbar-thumb:hover{
    background: #EC8A87 !important;
  }

 注:!important加这个是因为我在别的地方设置过这俩样式了

 el-table表头渐变背景样式

首先设置表头整个元素渐变背景,然后将表头每个单元格设置背景透明

el-table{
thead {
        color: #fff;
        font-weight: 500;
        background: linear-gradient(to right, #6fa3fe, #4cdafe) !important;
        & th {
          background-color: transparent;
        }
        & tr {
          background-color: transparent;
        }
      }
}