样式小妙招

# 文字渐变

.text{
  background: linear-gradient(90deg, #FFDCA1 0%, #FF9B70 100%);;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

1
2
3
4
5

# 文字描边

text-shadow

.text {
  text-shadow: 4px 0 #000, -4px 0 #000, 0 4px #000, 0 -4px #000,
    4px 4px #000, -4px -4px #000, 4px -4px #000, -4px 4px #000;
}

1
2
3
4

优缺点

优点
- 兼容性好
缺点
- 文字边缘会有锯齿
- 不可以设置透明色

text-stroke

.text {
  font-size: 50px;
  color: #000;
  -webkit-text-stroke: 4px #fff;
  position: relative;
  z-index: -1;
}
.text::after {
  content: attr(data-content);
  -webkit-text-stroke: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

优缺点

优点
- 效果好，描边丝滑
缺点
- 兼容性一般

# 卡片翻转

# 小于1px的边框

.border-06px::before {
  content: '';
  position: absolute;
  top: 0.3px; 
  left: 0.3px;
  width: calc(100% - 0.6px);
  height: calc(100% - 0.6px);
  border: 0.6px solid #FDDDC0; 
  border-radius: .08rem;
}

1
2
3
4
5
6
7
8
9
10

# 设置滚动条

注意

方法适用于 WebKit 内核的浏览器（如 Chrome、Safari、Edge）

/* 隐藏滚动条 */
body::-webkit-scrollbar {
  display: none;
}
body {
  /* 设置滚动条的宽高 */
  &::-webkit-scrollbar {
    width: 4px;    /* 滚动条的宽度 */
    height: 4px;   /* 滚动条的高度 */
  }
  /* 设置滚动条轨道的背景色 */
  &::-webkit-scrollbar-track {
    background-color: yellowgreen; 
  }
  /* 设置滚动条滑块的颜色 */
  &::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 10px; /* 滑块圆角 */
  }
  /* 鼠标悬停时滑块的颜色 */
  &::-webkit-scrollbar-thumb:hover {
    background-color: green; 
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 1.flex布局最后一行列表左对齐

当使用flex布局的时候，justify-content属性用于控制列表水平对齐，设置space-between表示其两端对齐但是当最后一列中的个数不满，则最后一行则不会靠左对齐，而是两边对齐，中间居中

# 每行列数固定

不使用justify-content:space-between来两端对齐，使用margin设置边距

  .container{
      width: 430px;
      border: 1px solid #ccc;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
  }
  .container .item{
      width: 100px;
      height: 100px;
      background: #ccc;
      margin-bottom: 10px;
  }
  .item:not(:nth-child(4n)){
    /* :not 用来匹配不符合选择器的元素，这里指用来匹配不是当前最右边的元素 */
    /* 4表示固定列数4列 */
    margin-right: calc(30px / 3);
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用justify-content:space-between设置两端对齐，同时单独设置最后一个元素的右边距

.container{
    width: 430px;
    border: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.container .item{
    width: 100px;
    height: 100px;
    background: #ccc;
    margin-bottom: 10px;
}
/* 如果最后一行是3个元素，需要加上一个列表的宽度和边距 */
.item:last-child:nth-child(4n - 1) {
    margin-right: calc(100px + 30px / 3);
}
/* 如果最后一行是2个元素，需要加上二个列表的宽度和二个列表的边距 */
.item:last-child:nth-child(4n - 2) {
    margin-right: calc(200px + 60px / 3);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 列宽度不固定

最后一项margin-right:auto

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item:last-child{
  margin-right: auto;
}

1
2
3
4
5
6
7
8

包裹盒子创建伪元素并设置flex:auto或flex:1

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.container::after{
  content: '';
  flex:1; /* 或flex:auto */
}

1
2
3
4
5
6
7
8
9

# 列数不固定

使用空白标签进行填充占位

使用足够多的占位标签进行占位,具体的占位数量是由最多列数的个数决定的

  <div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i>
</div>
<style>
  .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-right: -10px;
  }
  .list {
      width: 100px; height:100px;
      background-color: skyblue;
      margin: 15px 10px 0 0;
  }
  .container > i {
      width: 100px;
      margin-right: 10px;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 列数不固定HTML不能调整

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>
<style>
  .container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);  /* 不兼容IE */
    grid-gap: 10px;
  }
  .list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin-top: 5px;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上次更新: 2024/11/26, 23:34:30

← CSS基础 Grid布局→