css知识点集锦
# 深选择器
逗号表示或。 可以用/deep/
或::v-deep
,sass中/deep/
会报语法错误。
.el-menu-item, ::v-deep .el-submenu__title {
padding-left: 10px !important;
}
1
2
3
2
3
# hover缓慢变色-动态效果
.class-a:hover{
color: #2d85f0;
box-shadow: 0px -4px 0px $2d85f0 inset;
transition: all .3s;
}
1
2
3
4
5
2
3
4
5
# el-card的阴影
.shadow-card{
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
border: 1px solid #EBEEF5;
border-radius: 4px;
transition: .3s;
}
1
2
3
4
5
6
2
3
4
5
6
# 设置宽度或高度相对于浏览器窗口的动态计算
https://blog.csdn.net/romantic_love/article/details/80868909 (opens new window)
height:calc(100vh - 75px); //表示当前浏览器窗口高度的100%减去75px. 注意这里减号前后必须要有空格
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
1
2
3
4
5
6
7
2
3
4
5
6
7
# 图片设置宽高缩放自适应
宽高缩放自适应,意思是窗口比较窄时上下有黑边,窗口比较宽时左右有黑边
<img src="../assets/img/abc.png"
style="height:100%; width:100%;object-fit:contain"/>
1
2
2
编辑 (opens new window)
上次更新: 2021/10/11, 12:43:58