样式小妙招
# 文字渐变
.text{
background: linear-gradient(90deg, #FFDCA1 0%, #FF9B70 100%);;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
1
2
3
4
5
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
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
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
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
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
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
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
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
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