常用的CSS样式搜集(持续更新中)

常用的CSS样式搜集(持续更新中)

PC端

1. 滚动条美化

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
  // 备注：滚动条隐藏
  display: none;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease;
}

2. 文本高度超出后，出现滚动条

height: 200px; //设置固定高度或者最大高度
overflow: auto;

3.头部导航栏阴影效果

box-shadow: 0 -1px 14px rgba(0,0,0,.5);

---

mobile端

1.

---

PC端与mobile通用样式

1. 元素查找

* {
	outline: 1px solid red;
}

备注：对当前页面的所有元素使用该样式，可以准确看到每一个标签的大小及便捷边界位置，方便元素审查与样式调整。

2. flex布局

/* 行布局 */

.row-between-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.row-between-start {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.row-start-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.row-start-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.row-end-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.row-around-center {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.row-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


/* 列布局 */

.column-between-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.column-between-start {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.column-around-center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.column-start-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.column-start-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.column-between-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


/* 单个元素居中布局 */

.center-layout-container {
    display: flex;
    justify-content: center;
    align-items: center;
}