css知识点集锦

# 深选择器

逗号表示或。可以用/deep/或::v-deep，sass中/deep/会报语法错误。

  .el-menu-item, ::v-deep .el-submenu__title {
    padding-left: 10px !important;
  }

1
2
3

# hover缓慢变色-动态效果

.class-a:hover{
  color: #2d85f0;
  box-shadow: 0px -4px 0px $2d85f0 inset;
  transition: all .3s; 
}

1
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

# 设置宽度或高度相对于浏览器窗口的动态计算

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

# 图片设置宽高缩放自适应

宽高缩放自适应，意思是窗口比较窄时上下有黑边，窗口比较宽时左右有黑边

<img src="../assets/img/abc.png"
  style="height:100%; width:100%;object-fit:contain"/>

1
2

编辑

上次更新: 2021/10/11, 12:43:58

html页面模板→